/* Season Pass Modal Verbesserungen */
.season-pass-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#season-pass-content {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 16px;
}

.season-pass-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  min-height: 110px;
  padding: 12px 8px;
  background: #232323;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.season-pass-reward-label {
  margin-top: 8px;
  font-size: 15px;
  text-align: center;
  color: var(--text-primary, #fff);
}
/* Season Pass Reward Icons */
.season-pass-reward-icon-wrapper {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.season-pass-reward-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  object-fit: contain;
}

/* Ensure images using the icon class fill the allowed area and keep aspect ratio */
img.season-pass-reward-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* Keep aspect ratio */
}

.season-pass-reward-icon.gold-icon,
.season-pass-reward-icon.gems-icon {
  font-size: 40px;
}

/* Force gold icon in the season pass to use a larger square area instead of the smaller global .gold-icon size */
.season-pass-reward-icon.gold-icon {
  width: 40px;
  height: 40px;
}

/* Ensure image fill for gold icons used in season pass */
.season-pass-reward-icon.gold-icon img,
img.season-pass-reward-icon.gold-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ad-Free Pass Styles */
.ad-free-pass-card {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 2px solid #9f7aea !important;
}

.ad-free-pass-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.5;
  filter: blur(10px);
}

.shop-item-features {
  padding: 8px 0;
  margin: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.feature-item {
  font-size: 13px;
  padding: 4px 0;
  color: rgba(255,255,255,0.9);
}

.ad-free-badge {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: bold;
}

.ad-free-task {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
}

.task-card {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.task-card .task-header {
  margin-bottom: 12px;
}

.task-card .task-reward {
  font-size: 14px;
  color: #ffd700;
  margin: 8px 0;
}

.task-claim-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.task-claim-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.task-claim-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #555;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --accent-primary: #4a9eff;
  --accent-secondary: #6c5ce7;
  --success: #00b894;
  --warning: #fdcb6e;
  --error: #e17055;
  --common: #9e9e9e; /* grau */
  --uncommon: #4caf50; /* grün */
  --rare: #2196f3; /* blau */
  --epic: #9c27b0; /* lila */
  --legendary: #ffeb3b; /* gelb */
  --mythic: #f44336; /* rot */
  --border: #404040;
  --hard: #e17055; /* orange-rot */
  --harder: #d63031; /* dunkleres rot */
  --extreme: #b71c1c; /* tiefes blutrot */
  --hell: #6f0000; /* fast schwarzrot */
  --shadow: rgba(0, 0, 0, 0.3);
}

html {
  height: 100%;
  overflow-y: auto;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
  min-height: 100%;
}

.withdrawal-history-btn {
  margin-left: 8px;
}

#withdrawal-history-modal {
  z-index: 10001 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.withdrawal-history-modal {
  max-width: 600px;
  width: 90%;
  background: #222;
  border-radius: 12px;
  padding: 24px;
  margin: auto;
}

#withdrawal-history-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 12px;
}

.withdrawal-history-table {
  width: 100%;
  border-collapse: collapse;
  background: #222;
  color: #fff;
}

.withdrawal-history-table th, .withdrawal-history-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #444;
  text-align: center;
}

.withdrawal-history-table th {
  background: #333;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.2s;
}

.withdrawal-history-table th:hover {
  background: #3a3a3a;
}

.withdrawal-history-table tbody tr {
  transition: background 0.2s;
}

.withdrawal-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.date-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.date-cell .date {
  font-size: 13px;
  font-weight: 500;
}

.date-cell .time {
  font-size: 11px;
  color: #999;
}

.status-icon {
  font-size: 20px;
  cursor: help;
}

.txid-copy-btn {
  background: rgba(102, 126, 234, 0.2);
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.txid-copy-btn:hover {
  background: rgba(102, 126, 234, 0.3);
  transform: scale(1.1);
}

.txid-copy-btn.copied {
  background: #2ecc40;
  border-color: #2ecc40;
}

body {
  overflow-x: hidden;
  padding-bottom: 80px;
}

.notification-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-hover);
  z-index: 1001;
  max-width: 300px;
  display: none;
}

.notification-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Universal Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  overflow: hidden;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  touch-action: none;
}

.modal-overlay.show {
  display: flex;
}

.modal-overlay.active {
  display: flex;
}

/* Player Equipment Modal - always appears on top of all other modals */
#player-equipment-modal {
  z-index: 10002 !important;
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.modal-content.item-modal {
  max-width: 450px;
}
.modal-content.energy-modal {
  max-width: 450px;
}

.modal-content.market-modal {
  max-width: 500px;
  max-height: 85vh;
}

.modal-content.listings-modal {
  max-width: 550px;
  max-height: 85vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.modal-body {
  padding: 20px 24px;
}

.modal-body p {
  line-height: 1.6;
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
  justify-content: center;
}

.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.modal-btn-primary {
  background: var(--accent-primary);
  color: white;
}

.modal-btn-primary:hover {
  background: #3a8ee6;
}

.modal-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.modal-btn-secondary:hover {
  background: var(--bg-primary);
}

/* Item Details Modal */
.item-details-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.item-details-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.item-details-icon {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  overflow: hidden;
}

.item-details-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.item-details-info {
  flex: 1;
}

.item-details-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.item-details-rarity {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.item-details-rarity.common {
  color: var(--common);
}
.item-details-rarity.uncommon {
  color: var(--uncommon);
}
.item-details-rarity.rare {
  color: var(--rare);
}
.item-details-rarity.epic {
  color: var(--epic);
}
.item-details-rarity.legendary {
  color: var(--legendary);
}
.item-details-rarity.mythic {
  color: var(--mythic);
}

.item-details-set {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.item-details-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.item-details-price {
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

.suggested-price-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.suggested-price-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 16px;
  margin-left: 8px;
}

.claim-rewards-btn {
  background: var(--accent-primary);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.claim-rewards-btn:hover {
  background: var(--accent-secondary);
}

/* Market Listing Modal */
.market-step {
  display: none;
}

.market-step.active {
  display: block;
}

.market-item-listing-cost {
  font-size: 0.8em;
  color: #ffd700;
  margin-top: 4px;
  font-weight: bold;
}

.listing-cost-info {
  margin-top: 10px;
  padding: 8px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.listing-cost-label {
  font-size: 0.9em;
  color: #ffd700;
  margin-bottom: 4px;
}

.listing-cost-value {
  font-weight: bold;
  color: #fff;
}

.cashback-info {
  font-size: 0.8em;
  color: #ccc;
  margin-top: 4px;
}

.listing-cashback-info {
  font-size: 0.75em;
  color: #90ee90;
  margin-top: 2px;
}

/* Confirmation modal enhancements */
.rarity-common {
  color: var(--common);
}
.rarity-uncommon {
  color: var(--uncommon);
}
.rarity-rare {
  color: var(--rare);
}
.rarity-epic {
  color: var(--epic);
}
.rarity-legendary {
  color: var(--legendary);
}
.rarity-mythic {
  color: var(--mythic);
}

/* Market Filters in Modals - Modern Design */
.market-filters {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.6) 0%, rgba(30, 30, 46, 0.6) 100%);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(74, 74, 90, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.market-item-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

/* Market Item Card in Modals - Modern Design */
.market-item-card {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.market-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.market-item-card:hover::before {
  left: 100%;
}

.market-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.market-item-card.common {
  border-color: var(--common);
}
.market-item-card.uncommon {
  border-color: var(--uncommon);
}
.market-item-card.rare {
  border-color: var(--rare);
}
.market-item-card.epic {
  border-color: var(--epic);
}
.market-item-card.legendary {
  border-color: var(--legendary);
}
.market-item-card.mythic {
  border-color: var(--mythic);
}

.market-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Market Item Icon Container */
.market-item-icon-container,
.selected-item-icon-container {
  position: relative;
  display: inline-block;
}

.market-item-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}

.market-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.market-item-info {
  flex: 1;
}

.market-item-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.market-item-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.market-item-rarity.common {
  color: var(--common);
}
.market-item-rarity.uncommon {
  color: var(--uncommon);
}
.market-item-rarity.rare {
  color: var(--rare);
}
.market-item-rarity.epic {
  color: var(--epic);
}
.market-item-rarity.legendary {
  color: var(--legendary);
}
.market-item-rarity.mythic {
  color: var(--mythic);
}

.market-item-price {
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: 600;
}

#global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95); /* Dark semi-transparent background */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999; /* Very high z-index to overlay ALL content */
  pointer-events: all; /* Block all interactions with underlying elements */
  touch-action: none; /* Disable touch interactions */
}

/* Center the loading content */
#global-loading-overlay .loading-content {
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: rgba(34, 34, 34, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  min-width: 280px;
}

/* Spinner animation */
#global-loading-overlay .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8774e1; /* Match Telegram theme color */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Disable interactions when loading */
body.loading {
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

/* Allow interactions only on the loading overlay */
body.loading #global-loading-overlay {
  pointer-events: all;
}

/* Ensure loading status text is visible */
#loading-status {
  font-weight: bold;
}

/* Withdrawal Modal Styles */
.withdrawal-modal {
  max-width: 500px;
}

.withdrawal-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.info-value {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 14px;
}

.withdrawal-input {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 16px;
  margin-top: 8px;
}

.withdrawal-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.withdrawal-quick-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.quick-btn {
  flex: 1;
  padding: 8px;
  background: rgba(102, 126, 234, 0.2);
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.quick-btn:hover {
  background: rgba(102, 126, 234, 0.3);
}

.withdrawal-error {
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  border-radius: 6px;
  padding: 10px;
  margin-top: 15px;
  color: #e74c3c;
  font-size: 14px;
  text-align: center;
}

.withdrawal-btn {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
  margin-bottom: 10px;
}

.withdrawal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.withdrawal-fee-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 193, 7, 0.1);
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  font-size: 13px;
  color: #ffc107;
}

/* After market styles in styles.css */
#gems-section {
  display: none;
}
#gems-section.active {
  display: block;
}
.gems-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 12px;
  max-width: 100%;
}

@media (max-width: 480px) {
  .gems-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .gems-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 12px;
  max-width: 100%;
}

@media (max-width: 480px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (min-width: 769px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
}

.shop-item-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid var(--border-color);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shop-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.shop-item-card:hover::before {
  opacity: 1;
}

.shop-item-card.common {
  border-color: var(--common-color);
  box-shadow: 0 4px 12px rgba(158, 158, 158, 0.2);
}
.shop-item-card.uncommon {
  border-color: var(--uncommon-color);
  box-shadow: 0 4px 12px rgba(30, 255, 0, 0.2);
}
.shop-item-card.rare {
  border-color: var(--rare-color);
  box-shadow: 0 4px 12px rgba(0, 112, 255, 0.2);
}
.shop-item-card.epic {
  border-color: var(--epic-color);
  box-shadow: 0 4px 12px rgba(163, 53, 238, 0.2);
}
.shop-item-card.legendary {
  border-color: var(--legendary-color);
  box-shadow: 0 4px 12px rgba(255, 128, 0, 0.2);
}
.shop-item-card.mythic {
  border-color: var(--mythic-color);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
}

.shop-item-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.shop-item-card:active {
  transform: translateY(-2px) scale(1.01);
}

.shop-item-icon {
  font-size: 40px;
  text-align: center;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 12px;
  margin: 0 auto 8px;
  transition: transform 0.3s ease;
  position: relative;
}

.shop-item-card:hover .shop-item-icon {
  transform: scale(1.1) rotateZ(5deg);
}

.shop-item-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@media (max-width: 480px) {
  .shop-item-icon {
    font-size: 32px;
    height: 56px;
  }
}

.shop-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}

.shop-item-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-item-description {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-item-price {
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: 700;
  margin-top: auto;
  padding: 6px 10px;
  background: rgba(102, 126, 234, 0.15);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
  .shop-item-name {
    font-size: 13px;
  }
  
  .shop-item-description {
    font-size: 10px;
  }
  
  .shop-item-price {
    font-size: 13px;
    padding: 5px 8px;
  }
}

.item-rarity {
  font-size: 10px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  margin: 4px auto;
}

.item-rarity.common {
  background: linear-gradient(135deg, var(--common-color), #b8b8b8);
  color: white;
}
.item-rarity.uncommon {
  background: linear-gradient(135deg, var(--uncommon-color), #2bff00);
  color: white;
}
.item-rarity.rare {
  background: linear-gradient(135deg, var(--rare-color), #0080ff);
  color: white;
}
.item-rarity.epic {
  background: linear-gradient(135deg, var(--epic-color), #b535ee);
  color: white;
}
.item-rarity.legendary {
  background: linear-gradient(135deg, var(--legendary-color), #ff9900);
  color: white;
}
.item-rarity.mythic {
  background: linear-gradient(135deg, var(--mythic-color), #cc0000);
  color: white;
  animation: mythicGlow 2s ease-in-out infinite;
}

@keyframes mythicGlow {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(255, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 2px 12px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.4);
  }
}

.buy-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.buy-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.buy-btn:hover::before {
  width: 300px;
  height: 300px;
}

.buy-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.buy-btn:disabled {
  background: linear-gradient(135deg, #555 0%, #777 100%);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

@media (max-width: 480px) {
  .buy-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

.no-items {
  color: var(--text-secondary);
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  margin: 20px;
  border: 2px dashed rgba(255, 255, 255, 0.1);
}

.no-items::before {
  content: '🛒';
  display: block;
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Store Section Headers */
.store-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 16px 0 20px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.store-section h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.store-section h2:hover::before {
  left: 100%;
}

@media (max-width: 480px) {
  .store-section h2 {
    font-size: 18px;
    margin: 12px 0 16px;
    padding: 10px 16px;
  }
}

/* Tasks Container Styling */
#tasks-container {
  display: grid;
  gap: 12px;
  padding: 16px 12px;
}

@media (max-width: 480px) {
  #tasks-container {
    gap: 10px;
    padding: 12px 8px;
  }
}

/* ===== MY SALES MODAL - MODERN DESIGN ===== */
.reward-card {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.95) 0%, rgba(30, 30, 46, 0.95) 100%);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  border: 2px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.reward-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent);
  transition: left 0.5s ease;
}

.reward-card:hover::before {
  left: 100%;
}

.reward-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border-color: var(--accent-primary);
}

.reward-card.common {
  border-color: var(--common);
  box-shadow: 0 4px 16px rgba(158, 158, 158, 0.1);
}

.reward-card.uncommon {
  border-color: var(--uncommon);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
}

.reward-card.rare {
  border-color: var(--rare);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2);
}

.reward-card.epic {
  border-color: var(--epic);
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.25);
}

.reward-card.legendary {
  border-color: var(--legendary);
  box-shadow: 0 4px 16px rgba(255, 235, 59, 0.3);
}

.reward-card.mythic {
  border-color: var(--mythic);
  box-shadow: 0 4px 16px rgba(244, 67, 54, 0.35);
  animation: mythicPulse 2s infinite;
}

@keyframes mythicPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.35), 0 0 20px rgba(244, 67, 54, 0.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.5), 0 0 30px rgba(244, 67, 54, 0.4);
  }
}

/* My Sales Container */
#my-sales-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

/* Fix content overflow in reward cards */
.reward-card .item-details-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.reward-card .item-details-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.reward-card .item-details-icon {
  width: 70px;
  height: 70px;
  min-width: 70px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  overflow: hidden;
}

.reward-card .item-details-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.reward-card .item-details-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.reward-card .item-details-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.reward-card .item-details-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;
}

.reward-card .item-details-set {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.reward-card .item-details-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.reward-card .item-details-price {
  background: rgba(42, 42, 58, 0.6);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.reward-card .suggested-price-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.reward-card .suggested-price-value {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  word-break: break-word;
}

.reward-card .gold-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* My Sales Modal Specific Styles */
.my-sales-modal {
  max-width: 600px;
}

/* My Sales Pagination */
#sales-page-info {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

#sales-prev-page,
#sales-next-page {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

#sales-prev-page:hover:not(:disabled),
#sales-next-page:hover:not(:disabled) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

#sales-prev-page:disabled,
#sales-next-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sort Filter for Sales */
#sales-sort-filter {
  padding: 10px 36px 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  background: rgba(30, 30, 46, 0.8);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(102, 126, 234, 0.6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

#sales-sort-filter:hover,
#sales-sort-filter:focus {
  border-color: var(--accent-primary);
  background-color: rgba(30, 30, 46, 0.95);
  outline: none;
}

/* Responsive Adjustments for My Sales */
@media (max-width: 480px) {
  .reward-card {
    padding: 14px;
  }
  
  .my-sales-modal {
    max-width: 95%;
  }
  
  #my-sales-container {
    max-height: 58vh;
  }
  
  .reward-card .item-details-header {
    gap: 10px;
    flex-wrap: nowrap;
  }
  
  .reward-card .item-details-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    font-size: 26px;
  }
  
  .reward-card .item-details-info {
    flex: 1;
    min-width: 0;
  }
  
  .reward-card .item-details-name {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  
  .reward-card .item-details-rarity {
    font-size: 10px;
    margin-bottom: 3px;
  }
  
  .reward-card .item-details-set {
    font-size: 10px;
    line-height: 1.2;
  }
  
  .reward-card .item-details-stats {
    gap: 8px;
  }
  
  .reward-card .item-details-price {
    padding: 8px 10px;
    gap: 4px;
  }
  
  .reward-card .suggested-price-label {
    font-size: 11px;
  }
  
  .reward-card .suggested-price-value {
    font-size: 13px;
    gap: 4px;
    line-height: 1.3;
  }
  
  .reward-card .gold-icon {
    width: 16px;
    height: 16px;
  }
}

/* Shop Loading Skeleton */
.shop-loading-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 12px;
}

.shop-skeleton-card {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 16px;
  padding: 14px;
  min-height: 200px;
}

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

@media (max-width: 480px) {
  .shop-loading-skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 8px;
  }
}

/* Shop Item Hover Effects Enhancement */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.shop-item-card.new-item {
  animation: pulse 0.6s ease-in-out;
}

/* Gems Package Special Styling */
.gems-container .shop-item-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
  border: 2px solid rgba(102, 126, 234, 0.4);
}

.gems-container .shop-item-card:hover {
  border-color: rgba(102, 126, 234, 0.8);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.gems-container .shop-item-icon {
  font-size: 48px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
}

@media (max-width: 480px) {
  .gems-container .shop-item-icon {
    font-size: 40px;
  }
}

.selected-item-preview {
  margin-bottom: 20px;
}

.selected-item-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.selected-item-card.common {
  border-color: var(--common);
}
.selected-item-card.uncommon {
  border-color: var(--uncommon);
}
.selected-item-card.rare {
  border-color: var(--rare);
}
.selected-item-card.epic {
  border-color: var(--epic);
}
.selected-item-card.legendary {
  border-color: var(--legendary);
}
.selected-item-card.mythic {
  border-color: var(--mythic);
}

.selected-item-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}

.selected-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.selected-item-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.selected-item-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.selected-item-rarity.common {
  color: var(--common);
}
.selected-item-rarity.uncommon {
  color: var(--uncommon);
}
.selected-item-rarity.rare {
  color: var(--rare);
}
.selected-item-rarity.epic {
  color: var(--epic);
}
.selected-item-rarity.legendary {
  color: var(--legendary);
}
.selected-item-rarity.mythic {
  color: var(--mythic);
}

.price-input-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggested-price-display {
  background: var(--bg-tertiary);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.price-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-input-group label {
  font-weight: 600;
  color: var(--text-primary);
}

.price-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
}

.price-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.listing-info {
  background: var(--bg-tertiary);
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.listing-info p {
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.listing-info p:last-child {
  margin-bottom: 0;
}

/* My Listings Modal */
/* My Listings Card - Modern Design */
.my-listing-card {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  border: 2px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.my-listing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.my-listing-card:hover::before {
  left: 100%;
}

.my-listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.my-listing-card.common {
  border-color: var(--common);
}
.my-listing-card.uncommon {
  border-color: var(--uncommon);
}
.my-listing-card.rare {
  border-color: var(--rare);
}
.my-listing-card.epic {
  border-color: var(--epic);
}
.my-listing-card.legendary {
  border-color: var(--legendary);
}
.my-listing-card.mythic {
  border-color: var(--mythic);
}

.listing-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.listing-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}

.listing-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.listing-info {
  flex: 1;
}

.listing-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.listing-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.listing-rarity.common {
  color: var(--common);
}
.listing-rarity.uncommon {
  color: var(--uncommon);
}
.listing-rarity.rare {
  color: var(--rare);
}
.listing-rarity.epic {
  color: var(--epic);
}
.listing-rarity.legendary {
  color: var(--legendary);
}
.listing-rarity.mythic {
  color: var(--mythic);
}

.listing-price {
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: 600;
}

.listing-status {
  margin-bottom: 12px;
}

.status-live {
  color: var(--success);
  font-weight: 600;
}

.status-pending {
  color: var(--warning);
  font-weight: 600;
}

/* Listing Actions - Modern Button Design */
.listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.listing-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.listing-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.listing-btn:active::before {
  width: 300px;
  height: 300px;
}

.watch-ad-btn {
  background: linear-gradient(135deg, #00bf8f 0%, #00a085 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 191, 143, 0.3);
}

.watch-ad-btn:hover {
  background: linear-gradient(135deg, #00d9a3 0%, #00bf8f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 191, 143, 0.4);
}

.speed-up-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.speed-up-btn:hover {
  background: linear-gradient(135deg, #7a8ef5 0%, #8a5cb3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.cancel-btn {
  background: linear-gradient(135deg, #ee5a6f 0%, #e74c3c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3);
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #ff6b81 0%, #ee5a6f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(238, 90, 111, 0.4);
}

.listing-btn:active {
  transform: translateY(0);
}

/* No Listings / Empty State - Modern Design */
.no-listings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  padding: 60px 20px;
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.3) 0%, rgba(30, 30, 46, 0.3) 100%);
  border-radius: 16px;
  border: 2px dashed rgba(74, 74, 90, 0.5);
  min-height: 200px;
}

.no-listings::before {
  content: '📦';
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-listings-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.no-listings-subtext {
  font-size: 14px;
  color: var(--text-tertiary);
}

.active-boosts-section {
  margin-bottom: 20px;
}
.active-boosts-section h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
}
.boosts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.boost-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px;
  flex: 1 1 calc(50% - 10px);
  min-width: 150px;
}
.boost-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.boost-icon {
  font-size: 1.5em;
}
.boost-info {
  flex: 1;
}
.boost-name {
  font-weight: bold;
}
.boost-effect {
  color: var(--text-secondary);
  font-size: 0.9em;
}
.boost-expiry {
  margin-top: 5px;
  font-size: 0.8em;
  color: var(--accent-primary);
}
.no-boosts {
  color: var(--text-secondary);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: center; /* statt space-between */
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

.currency-info {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  justify-content: center;
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  flex-shrink: 1;
  max-width: 120px; /* kannst du anpassen */
  overflow: hidden;
}

.currency-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.currency-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.currency-icon img {
  width: 16px;
  height: 16px;
}

.user-level {
  background: var(--accent-secondary);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* Main Content */
.main-content {
  margin-top: 70px;
  padding: 0 16px 90px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

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

/* Home Tab */
.welcome-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
  border-radius: 20px;
  padding: 32px 24px;
  margin: 16px 0;
  text-align: center;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.6s ease-out;
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate-glow 20s linear infinite;
}

.welcome-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}

.welcome-subtitle {
  opacity: 0.9;
  font-size: 16px;
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0;
  animation: fadeIn 0.8s ease-out 0.2s both;
}

.stat-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
  border-color: var(--accent-primary);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent-primary);
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Equipment System */
.equipment-section {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.equipment-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 300px;
  margin: 0 auto;
}

.equipment-slot {
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 80px;
  overflow: hidden;
}

.equipment-slot:hover {
  border-color: var(--accent-primary);
  background: rgba(74, 158, 255, 0.1);
}

.equipment-slot.equipped {
  border: 2px solid var(--accent-primary);
  background: var(--bg-secondary);
}

.equipment-slot.equipped.legendary {
  border-color: var(--legendary);
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.3);
}

.equipment-slot.equipped.epic {
  border-color: var(--epic);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.3);
}

.equipment-slot.equipped.rare {
  border-color: var(--rare);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.equipment-slot.equipped.uncommon {
  border-color: var(--uncommon);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.equipment-slot-empty {
  visibility: hidden;
}

.slot-icon {
  font-size: 24px;
  margin-bottom: 4px;
  opacity: 0.6;
}

.slot-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

.equipped-item {
  font-size: 20px;
  margin-bottom: 2px;
  width: 100%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.equipped-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.equipped-name {
  font-size: 9px;
  color: var(--text-primary);
  text-align: center;
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-stats {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-name {
  color: var(--text-secondary);
  font-size: 14px;
}

.stat-value-display {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 14px;
}

.set-bonus {
  background: linear-gradient(135deg, var(--epic), var(--legendary));
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  text-align: center;
}

.set-bonus-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.set-bonus-desc {
  font-size: 11px;
  opacity: 0.9;
}

/* Inventory Filters Section */
.inventory-filters-section {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-chips-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.filter-chip-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-chip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 4px;
}

.filter-chip-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a9eff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.filter-chip-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-primary);
}

.filter-chip-select:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.filter-chip-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px;
}

.inventory-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.inventory-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.inventory-action-btn .btn-icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.inventory-action-btn-sell {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
  color: white;
}

.inventory-action-btn-sell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
}

.inventory-action-btn-sell:active {
  transform: translateY(0);
}

.inventory-action-btn-merge {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
  color: white;
}

.inventory-action-btn-merge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
}

.inventory-action-btn-merge:active {
  transform: translateY(0);
}

/* Legacy action button support */
.action-btn {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.action-btn:hover {
  background: #3a8ee6;
}

/* Market Actions - Modern Grid Design */
.market-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  padding: 0;
}

.market-actions .action-btn {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border: 2px solid rgba(102, 126, 234, 0.3);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}

.market-actions .action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
  transition: left 0.5s ease;
}

.market-actions .action-btn:hover::before {
  left: 100%;
}

.market-actions .action-btn:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.market-actions .action-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

@media (max-width: 480px) {
  .market-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .market-actions .action-btn {
    padding: 12px 10px;
    font-size: 13px;
  }
}

/* New Inventory Item Cards */
.inventory-items-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px;
}

.inventory-item-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 16px;
  padding: 16px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Quantity Badge */
.quantity-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.inventory-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.inventory-item-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.inventory-item-card:hover::before {
  opacity: 1;
}

.inventory-item-card:active {
  transform: translateY(-2px) scale(1.01);
}

.inventory-item-card.common {
  border-color: var(--common);
}
.inventory-item-card.uncommon {
  border-color: var(--uncommon);
}
.inventory-item-card.rare {
  border-color: var(--rare);
}
.inventory-item-card.epic {
  border-color: var(--epic);
}
.inventory-item-card.legendary {
  border-color: var(--legendary);
}
.inventory-item-card.mythic {
  border-color: var(--mythic);
}

/* Inventory Card Content Styling */
.inventory-item-card .item-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inventory-item-card .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.inventory-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inventory-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.inventory-card-rarity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  align-self: center;
  margin-bottom: 4px;
}

.inventory-card-rarity.common {
  color: var(--common);
  background: rgba(158, 158, 158, 0.15);
}
.inventory-card-rarity.uncommon {
  color: var(--uncommon);
  background: rgba(30, 255, 0, 0.15);
}
.inventory-card-rarity.rare {
  color: var(--rare);
  background: rgba(0, 112, 221, 0.15);
}
.inventory-card-rarity.epic {
  color: var(--epic);
  background: rgba(163, 53, 238, 0.15);
}
.inventory-card-rarity.legendary {
  color: var(--legendary);
  background: rgba(255, 128, 0, 0.15);
}
.inventory-card-rarity.mythic {
  color: var(--mythic);
  background: rgba(255, 40, 40, 0.15);
}

.inventory-card-set {
  font-size: 11px;
  color: var(--accent-primary);
  font-weight: 600;
  opacity: 0.8;
  margin-bottom: 4px;
}

.inventory-card-stats-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.stat-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stat-compact-icon {
  font-size: 14px;
}

.stat-compact-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.inventory-card-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #f39c12;
  margin-top: 4px;
  padding: 6px;
  background: rgba(243, 156, 18, 0.1);
  border-radius: 6px;
}

.inventory-card-price .gold-icon-small {
  width: 16px;
  height: 16px;
}

/* Mobile Responsiveness for Inventory */
@media (max-width: 480px) {
  .inventory-items-container {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .inventory-item-card {
    padding: 12px;
  }

  .inventory-item-card .item-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
  }

  .inventory-card-name {
    font-size: 13px;
  }

  .inventory-card-stats-compact {
    gap: 4px;
    padding: 6px;
  }

  .stat-compact-icon {
    font-size: 12px;
  }

  .stat-compact-value {
    font-size: 11px;
  }

  .filter-chips-container {
    grid-template-columns: 1fr;
  }

  .inventory-action-buttons {
    gap: 8px;
  }

  .inventory-action-btn {
    padding: 12px 16px;
    font-size: 14px;
  }

  .inventory-filters-section {
    padding: 12px;
  }
}

/* Extra small devices optimization */
@media (max-width: 360px) {
  .inventory-items-container {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }

  .inventory-item-card {
    padding: 10px;
  }

  .inventory-item-card .item-icon {
    width: 60px;
    height: 60px;
  }

  .inventory-card-name {
    font-size: 12px;
  }

  .inventory-card-rarity {
    font-size: 10px;
    padding: 2px 6px;
  }

  .inventory-card-set {
    font-size: 10px;
  }

  .filter-chip-select {
    font-size: 13px;
    padding: 8px 10px;
    padding-right: 32px;
  }

  .filter-chip-label {
    font-size: 11px;
  }

  .inventory-action-btn {
    padding: 10px 12px;
    font-size: 13px;
  }

  .inventory-action-btn .btn-icon {
    font-size: 18px;
  }
}

.reward-item-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 14px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s ease;
  position: center;
}

.reward-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow);
}

.reward-item-card.common {
  border-color: var(--common);
}
.reward-item-card.uncommon {
  border-color: var(--uncommon);
}
.reward-item-card.rare {
  border-color: var(--rare);
}
.reward-item-card.epic {
  border-color: var(--epic);
}
.reward-item-card.legendary {
  border-color: var(--legendary);
}
.reward-item-card.mythic {
  border-color: var(--mythic);
}

.click-for-details {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  opacity: 0.7;
  font-style: italic;
}

.reward-item-card:hover .click-for-details {
  opacity: 1;
  color: var(--accent-primary);
}

.item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.item-header .item-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  overflow: hidden;
}

.item-header .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.item-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.item-rarity.common {
  color: var(--common);
}
.item-rarity.uncommon {
  color: var(--uncommon);
}
.item-rarity.rare {
  color: var(--rare);
}
.item-rarity.epic {
  color: var(--epic);
}
.item-rarity.legendary {
  color: var(--legendary);
}
.item-rarity.mythic {
  color: var(--mythic);
}

.item-set {
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
}

.item-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  padding: 8px 10px;
  border-radius: 6px;
}

.stat-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
}

.stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
}

.stat-value.negative {
  color: var(--error);
}

.no-items {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 40px 20px;
}

.refresh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.info-button {
  background-color: #eee;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.info-button:hover {
  background-color: #ddd;
}

.airdrop-ticket-selection {
  display: flex;
  align-items: center;
  margin: 16px 0;
}

.airdrop-ticket-selection label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 8px;
}

.airdrop-ticket-selection select {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.airdrop-ticket-selection select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Airdrop Buy Button */
.buy-tickets-btn {
  width: 100%;
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.buy-tickets-btn:hover {
  background: var(--accent-secondary);
}

.buy-tickets-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* Expeditions */
.expedition-card {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.95), rgba(30, 40, 55, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.expedition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(102, 126, 234, 0.25), 0 0 0 1px rgba(102, 126, 234, 0.3) inset;
  border-color: rgba(102, 126, 234, 0.4);
}

.expedition-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
}

.expedition-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.expedition-card:hover::after {
  opacity: 1;
}

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

.expedition-info {
  flex: 1;
}

.expedition-info h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #fff, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.3px;
}

.expedition-duration {
  color: rgba(160, 174, 192, 0.9);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.expedition-duration::before {
  content: "⏱️";
  font-size: 14px;
}

.expedition-difficulty {
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  transition: all 0.3s ease;
}

.expedition-difficulty:hover {
  transform: scale(1.05);
}

.difficulty-easy {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2);
}

.difficulty-medium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4), 0 0 20px rgba(245, 158, 11, 0.2);
}

.difficulty-hard {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
}

.difficulty-harder {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4), 0 0 20px rgba(139, 92, 246, 0.2);
}

.difficulty-extreme {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: white;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4), 0 0 20px rgba(236, 72, 153, 0.2);
}

.difficulty-hell {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #ff0000;
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5), 0 0 25px rgba(255, 0, 0, 0.3);
  border-color: rgba(255, 0, 0, 0.3);
  animation: hellPulse 2s ease-in-out infinite;
}

@keyframes hellPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5), 0 0 25px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.7), 0 0 35px rgba(255, 0, 0, 0.5);
  }
}

.expedition-rewards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.expedition-badges {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* XP Badge styling */
.expedition-xp-badge {
  padding: 6px 14px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3), 0 0 15px rgba(79, 70, 229, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.expedition-xp-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4), 0 0 20px rgba(79, 70, 229, 0.3);
}

.expedition-xp-badge::before {
  content: "✨";
  font-size: 14px;
}

.reward-text {
  font-size: 13px;
  color: rgba(203, 213, 225, 0.95);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

.expedition-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 14px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.expedition-stats > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.energy-cost {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.gold-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.gold-icon-small {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 4px;
}

.gold-reward-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.success-rate {
  color: #10b981;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.fail-rate {
  color: #ef4444;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.expedition-button {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.expedition-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.expedition-button:hover::before {
  left: 100%;
}

.expedition-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.expedition-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

.expedition-button:disabled {
  background: linear-gradient(135deg, #374151, #1f2937);
  color: rgba(156, 163, 175, 0.7);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.expedition-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

.expedition-active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
  }
}

.expedition-progress {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.95), rgba(30, 40, 55, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.expedition-progress h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.progress-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) inset;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

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

.expedition-timer {
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
  margin: 12px 0;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Market */
.market-filters {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.search-input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 12px;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap; /* Ermöglicht Umbruch bei kleinen Bildschirmen */
}

.filter-row.mt-20 {
  margin-top: 20px;
}

.filter-row.mb-20 {
  margin-bottom: 20px;
}

.filter-select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  width: auto; /* Anpassung, damit der Filter nur die Inhaltsbreite einnimmt */
  min-width: 80px; /* Minimale Breite für Lesbarkeit */
  max-width: 150px; /* Begrenzung der maximalen Breite */
}

.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

#sales-sort-filter {
  width: 100%;
  max-width: 300px; /* gleiche Max-Breite wie andere Elemente */
  padding: 8px;
  font-size: 16px;
}

/* Market Container - Grid Layout */
#market-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 4px;
}

@media (max-width: 768px) {
  #market-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  #market-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Market Item Cards - Modern Card Design */
.market-item {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
  border-radius: 16px;
  padding: 16px;
  border: 2px solid var(--border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.market-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.market-item:hover::before {
  opacity: 1;
}

.market-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.market-item:active {
  transform: translateY(-3px) scale(1.01);
}

/* Rarity Border Colors for Market Items */
.market-item.common {
  border-color: var(--common);
}
.market-item.uncommon {
  border-color: var(--uncommon);
}
.market-item.rare {
  border-color: var(--rare);
}
.market-item.epic {
  border-color: var(--epic);
}
.market-item.legendary {
  border-color: var(--legendary);
}
.market-item.mythic {
  border-color: var(--mythic);
}

.market-item .item-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.market-item .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.market-item:hover .item-icon img {
  transform: scale(1.1);
}

.market-item-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.market-item-info .item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
  word-wrap: break-word;
}

.market-item-info .item-rarity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.market-item-seller {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.market-item-seller::before {
  content: '👤';
  font-size: 12px;
}

.market-item-price {
  font-size: 16px;
  color: var(--accent-primary);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.buy-btn {
  width: 100%;
  background: linear-gradient(135deg, #00bf8f 0%, #00a085 100%);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 191, 143, 0.3);
}

.buy-btn:hover {
  background: linear-gradient(135deg, #00d9a3 0%, #00bf8f 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 191, 143, 0.4);
}

.buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 191, 143, 0.3);
}

@media (max-width: 480px) {
  .market-item {
    padding: 12px;
  }
  
  .market-item .item-icon {
    width: 60px;
    height: 60px;
    font-size: 36px;
    margin-bottom: 8px;
  }
  
  .market-item-info .item-name {
    font-size: 13px;
  }
  
  .market-item-info .item-rarity {
    font-size: 10px;
  }
  
  .market-item-seller {
    font-size: 10px;
    margin-bottom: 6px;
  }
  
  .market-item-price {
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .buy-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Market Grid for Items */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 4px;
}

@media (max-width: 768px) {
  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 480px) {
  .market-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Market Empty State */
#market-container:empty::after,
.market-item-list:empty::after {
  content: '🏪 No items available';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 16px;
  text-align: center;
  grid-column: 1 / -1;
}

.no-market-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.3) 0%, rgba(30, 30, 46, 0.3) 100%);
  border-radius: 16px;
  border: 2px dashed rgba(74, 74, 90, 0.5);
  min-height: 200px;
}

.no-market-items::before {
  content: '🏪';
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-market-items-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.no-market-items-subtext {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* Leaderboard - Modern Enhanced Design */
.leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  max-width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}

.leaderboard-item {
  background: linear-gradient(145deg, rgba(42, 42, 58, 0.95), rgba(30, 30, 46, 0.95));
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid rgba(74, 74, 90, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: visible;
  min-height: 80px;
}

.leaderboard-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.leaderboard-item:hover::before {
  transform: translateX(100%);
}

.leaderboard-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  border-color: var(--accent-primary);
}

/* Top 3 Special Styles */
.leaderboard-item:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.15), rgba(255, 179, 0, 0.1));
  border: 3px solid #ffd700;
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.2) inset;
  animation: pulse-gold 3s ease-in-out infinite;
}

.leaderboard-item:nth-child(3) {
  background: linear-gradient(145deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.1));
  border: 3px solid #c0c0c0;
  box-shadow: 0 6px 25px rgba(192, 192, 192, 0.3), 0 0 40px rgba(192, 192, 192, 0.15) inset;
}

.leaderboard-item:nth-child(4) {
  background: linear-gradient(145deg, rgba(205, 127, 50, 0.15), rgba(184, 115, 51, 0.1));
  border: 3px solid #cd7f32;
  box-shadow: 0 6px 25px rgba(205, 127, 50, 0.3), 0 0 40px rgba(205, 127, 50, 0.15) inset;
}

@keyframes pulse-gold {
  0%, 100% {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.2) inset;
  }
  50% {
    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.3) inset;
  }
}

.rank {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a3a4a, #2a2a3a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  color: var(--text-primary);
  border: 3px solid var(--border);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.rank::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.leaderboard-item:hover .rank::before {
  opacity: 0.5;
}

/* Top 1 - Gold Crown */
.leaderboard-item:nth-child(2) .rank {
  background: linear-gradient(135deg, #ffd700, #ffed4e, #ffc700);
  color: #1a1a1a;
  border: 4px solid #ffed4e;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 8px 20px rgba(255, 215, 0, 0.4);
  font-size: 26px;
  width: 64px;
  height: 64px;
  animation: rotate-glow 4s linear infinite;
}

.leaderboard-item:nth-child(2) .rank::after {
  content: "👑";
  position: absolute;
  top: -12px;
  right: -12px;
  font-size: 28px;
  animation: bounce-crown 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1));
}

@keyframes rotate-glow {
  0% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 8px 20px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 8px 30px rgba(255, 215, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 8px 20px rgba(255, 215, 0, 0.4);
  }
}

@keyframes bounce-crown {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.1);
  }
}

/* Top 2 - Silver Medal */
.leaderboard-item:nth-child(3) .rank {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #b0b0b0);
  color: #1a1a1a;
  border: 4px solid #e8e8e8;
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.6), 0 6px 15px rgba(192, 192, 192, 0.3);
  font-size: 24px;
  width: 60px;
  height: 60px;
}

.leaderboard-item:nth-child(3) .rank::after {
  content: "🥈";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.8));
}

/* Top 3 - Bronze Medal */
.leaderboard-item:nth-child(4) .rank {
  background: linear-gradient(135deg, #cd7f32, #e8a870, #b8733b);
  color: #1a1a1a;
  border: 4px solid #e8a870;
  box-shadow: 0 0 20px rgba(205, 127, 50, 0.6), 0 6px 15px rgba(205, 127, 50, 0.3);
  font-size: 24px;
  width: 60px;
  height: 60px;
}

.leaderboard-item:nth-child(4) .rank::after {
  content: "🥉";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.8));
}

/* Current Player Highlight */
.leaderboard-item.current-player {
  background: linear-gradient(145deg, rgba(74, 144, 226, 0.2), rgba(74, 144, 226, 0.1));
  border: 2px solid var(--accent-primary);
  box-shadow: 0 4px 20px rgba(74, 144, 226, 0.4), 0 0 30px rgba(74, 144, 226, 0.2) inset;
}

.leaderboard-item.current-player::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-primary);
  border-radius: 16px 0 0 16px;
}

.player-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
  border: 2px solid var(--accent-primary);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.leaderboard-item:hover .player-avatar {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.player-avatar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  z-index: -1;
  opacity: 0.7;
}

.leaderboard-item:nth-child(2) .player-avatar,
.leaderboard-item:nth-child(3) .player-avatar,
.leaderboard-item:nth-child(4) .player-avatar {
  width: 56px;
  height: 56px;
  border-width: 3px;
}

.leaderboard-item:nth-child(2) .player-avatar {
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.leaderboard-item:nth-child(2) .player-avatar::before {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
}

.leaderboard-item:nth-child(3) .player-avatar {
  border-color: #c0c0c0;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.leaderboard-item:nth-child(3) .player-avatar::before {
  background: linear-gradient(45deg, #c0c0c0, #e8e8e8);
}

.leaderboard-item:nth-child(4) .player-avatar {
  border-color: #cd7f32;
  box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.leaderboard-item:nth-child(4) .player-avatar::before {
  background: linear-gradient(45deg, #cd7f32, #e8a870);
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.player-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.leaderboard-item:nth-child(2) .player-name {
  font-size: 17px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.leaderboard-item:nth-child(3) .player-name {
  font-size: 16px;
  color: #e8e8e8;
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.leaderboard-item:nth-child(4) .player-name {
  font-size: 16px;
  color: #e8a870;
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.player-stats-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.player-score {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-primary);
  background: rgba(74, 144, 226, 0.1);
  padding: 6px 12px;
  border-radius: 10px;
  border: 2px solid rgba(74, 144, 226, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.leaderboard-item:hover .player-score {
  transform: scale(1.05);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.leaderboard-item:nth-child(2) .player-score {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
  font-size: 15px;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.3);
}

.leaderboard-item:nth-child(3) .player-score {
  background: rgba(192, 192, 192, 0.15);
  border-color: rgba(192, 192, 192, 0.5);
  color: #e8e8e8;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(192, 192, 192, 0.3);
}

.leaderboard-item:nth-child(4) .player-score {
  background: rgba(205, 127, 50, 0.15);
  border-color: rgba(205, 127, 50, 0.5);
  color: #e8a870;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(205, 127, 50, 0.3);
}

.player-level {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8), rgba(30, 30, 46, 0.8));
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.player-level::before {
  content: "⚡";
  font-size: 13px;
}

.player-power {
  background: linear-gradient(135deg, var(--epic), var(--legendary));
  color: white;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(156, 39, 176, 0.4);
}

.player-power::before {
  content: "⚔️";
  font-size: 13px;
}

.player-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.player-badge {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.9), rgba(30, 30, 46, 0.9));
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.player-badge.clan-leader {
  background: linear-gradient(135deg, var(--legendary), #ffa000);
  color: white;
  border-color: var(--legendary);
  box-shadow: 0 2px 8px rgba(255, 235, 59, 0.4);
}

.player-badge.top-trader {
  background: linear-gradient(135deg, var(--success), #00a085);
  color: white;
  border-color: var(--success);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.leaderboard-filter-container {
  background: linear-gradient(145deg, rgba(42, 42, 58, 0.6), rgba(30, 30, 46, 0.6));
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  border: 2px solid var(--border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.game-select,
.leaderboard-limit-select {
  background: linear-gradient(135deg, #3a3a4a, #2a2a3a);
  border: 2px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-family: inherit;
}

#leaderboard-filter {
  min-width: 180px;
  flex: 1;
  max-width: 250px;
}

#leaderboard-limit {
  min-width: 80px;
  width: auto;
}

.game-select:hover,
.leaderboard-limit-select:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  transform: translateY(-2px);
}

.game-select:focus,
.leaderboard-limit-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
}

.pagination-btn {
  background: linear-gradient(135deg, var(--accent-primary), #3a8ee6);
  color: white;
  border: 2px solid var(--accent-primary);
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.pagination-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a8ee6, var(--accent-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.5);
}

.pagination-btn:disabled {
  background: linear-gradient(135deg, #4a4a5a, #3a3a4a);
  border-color: var(--border);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.page-info {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  background: rgba(42, 42, 58, 0.6);
  border-radius: 10px;
  border: 2px solid var(--border);
}

.no-entries {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 18px;
  background: linear-gradient(145deg, rgba(42, 42, 58, 0.4), rgba(30, 30, 46, 0.4));
  border-radius: 16px;
  border: 2px dashed var(--border);
  margin: 20px 0;
}

/* Profile */
.profile-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 16px;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-id {
  font-size: 14px;
  color: var(--text-secondary);
}

.wallet-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
  border: 1px solid var(--border);
}

.wallet-connect-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* TON Connect UI Button Styling */
#ton-connect-button {
  width: 100%;
  max-width: 300px;
  margin: 16px auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style TON Connect UI button to match game design */
#ton-connect-button button,
#ton-connect-button .tc-button {
  width: 100% !important;
  max-width: 300px !important;
  background: var(--accent-primary) !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#ton-connect-button button:hover,
#ton-connect-button .tc-button:hover {
  background: #3a8ee6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(58, 142, 230, 0.3) !important;
}

/* Force TON Connect dropdown to appear above button using viewport positioning */
#ton-connect-button div[style*="position: absolute"] {
  position: fixed !important;
  top: auto !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  max-width: 250px !important;
  min-width: 200px !important;
}

/* Alternative targeting for dropdown elements */
#ton-connect-button > div > div[style*="position: absolute"],
#ton-connect-button [role="dialog"],
#ton-connect-button [role="menu"] {
  position: fixed !important;
  top: auto !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
}

/* Style the dropdown content */
#ton-connect-button div[style*="position: absolute"] > div,
#ton-connect-button [role="dialog"] > div,
#ton-connect-button [role="menu"] > div {
  background: var(--bg-primary) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  padding: 16px !important;
}

/* Make disconnect button highly visible */
#ton-connect-button div[style*="position: absolute"] button,
#ton-connect-button [role="dialog"] button,
#ton-connect-button [role="menu"] button {
  background: #ff4757 !important;
  color: white !important;
  border: 2px solid #ff3742 !important;
  font-weight: bold !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  margin: 8px 0 !important;
  width: 100% !important;
  font-size: 14px !important;
}

/* Ensure dropdown content is visible */
#ton-connect-button .tc-dropdown-content,
#ton-connect-button .tc-wallet-info {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  color: var(--text-primary) !important;
  padding: 12px !important;
  min-width: 200px !important;
  max-width: 280px !important;
}

/* TON Connect modal styling */
.tc-modal-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.tc-modal {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.tc-modal-header {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.tc-modal-body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.wallet-status {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.wallet-address {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  word-break: break-all;
}

.connect-wallet-btn {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.connect-wallet-btn:hover {
  background: #3a8ee6;
}

.wallet-connected {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid var(--border);
}

.wallet-connected-status {
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
  margin-bottom: 8px;
}

.disconnect-wallet-btn {
  background: var(--error);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.disconnect-wallet-btn:hover {
  background: #d63031;
}

.level-progress {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.level-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}

.level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width 0.3s ease;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.achievement-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow);
}

.achievement-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.achievement-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Section Titles */
.section-title {
  font-size: 20px;
  font-weight: 800;
  margin: 32px 0 20px;
  color: var(--text-primary);
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border-left: 4px solid var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  animation: slideInLeft 0.5s ease-out;
}

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

/* Home Tab Containers */
#daily-quests-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

#airdrop-container {
  margin-top: 24px;
  animation: fadeIn 1s ease-out 0.4s both;
}

/* Airdrop Card Modern Styling */
.expedition-card[style*="airdrop"] {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.1)) !important;
  border: 1px solid rgba(52, 152, 219, 0.3) !important;
  box-shadow: 0 4px 16px rgba(52, 152, 219, 0.2);
}

.airdrop-info-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.2) !important;
  border: 1px solid var(--accent-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

.airdrop-info-btn:hover {
  background: var(--accent-primary) !important;
  transform: scale(1.1) rotate(15deg);
}

.winner-distribution-section {
  animation: fadeIn 0.6s ease-out;
}

.wd-chip {
  transition: all 0.3s ease;
}

.wd-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 8px 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav-container {
  display: flex;
  justify-content: space-around;
  max-width: 480px;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  min-width: 60px;
}

.nav-item:hover {
  background: var(--bg-tertiary);
}

.nav-item.active {
  color: var(--accent-primary);
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-label {
  font-size: 10px;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 480px) {
  .main-content {
    padding: 0 12px;
  }

  .header-content {
    padding: 0 12px;
  }

  .welcome-card {
    padding: 24px 20px;
    margin: 12px 0;
  }

  .welcome-title {
    font-size: 24px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 16px 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  .section-title {
    font-size: 18px;
    padding: 10px 14px;
    margin: 24px 0 16px;
  }

  .task {
    padding: 16px 18px;
  }

  .task-name {
    font-size: 15px;
  }

  .task__button {
    padding: 8px 16px;
    font-size: 13px;
    min-width: 70px;
  }

  .equipment-grid-new {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 280px;
  }

  .equipment-slot {
    min-height: 70px;
  }

  .slot-icon {
    font-size: 20px;
  }

  .slot-label {
    font-size: 9px;
  }

  .equipped-item {
    font-size: 18px;
  }

  .equipped-name {
    font-size: 8px;
  }

  .item-stats {
    grid-template-columns: 1fr;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .nav-item {
    min-width: 50px;
  }

  .nav-icon {
    font-size: 18px;
  }

  .nav-label {
    font-size: 9px;
  }

  .filter-row {
    gap: 8px;
  }

  .filter-select {
    padding: 8px 10px;
    font-size: 13px;
    min-width: 70px;
    max-width: 120px;
  }

  .filter-select:first-child {
    min-width: 50px; /* Noch schmaler für den ersten Filter auf Mobilgeräten */
  }
}

/* Loading States */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  color: var(--text-secondary);
}

.loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* Add these styles after the existing market styles */

/* Equipped Badge */
.equipped-badge {
  background: var(--accent-primary);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 600;
}

/* Change Button */
.change-btn {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.change-btn:hover {
  background: #3a8ee6;
}

/* Expedition Refresh Section */
.expedition-refresh-section {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.95), rgba(30, 40, 55, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
  overflow: hidden;
}

.expedition-refresh-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
}

.refresh-info h3 {
  color: var(--text-primary);
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.refresh-info p {
  color: rgba(203, 213, 225, 0.9);
  margin-bottom: 8px;
  font-size: 14px;
}

.refresh-free {
  color: #10b981 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  font-size: 15px !important;
}

.refresh-cost {
  color: #fbbf24 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
  font-size: 15px !important;
}

.expedition-refresh-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 16px;
  font-size: 16px;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.expedition-refresh-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.expedition-refresh-btn:hover::before {
  left: 100%;
}

.expedition-refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.6);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.expedition-refresh-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

#expedition-rewards-modal .modal-content {
  max-width: 520px;
  background: linear-gradient(135deg, rgba(30, 40, 55, 0.98), rgba(20, 30, 45, 0.98));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

#expedition-result-title {
  margin-bottom: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

#expedition-result-subtitle {
  margin-top: 0;
  text-align: center;
  color: rgba(160, 174, 192, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.rewards-container {
  margin-bottom: 24px;
}

.rewards-container h3 {
  margin-bottom: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.rewards-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) inset;
}

.rewards-list::-webkit-scrollbar {
  width: 6px;
}

.rewards-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.rewards-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.rewards-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
}

.reward-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.reward-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #667eea, #764ba2);
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.reward-item:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(118, 75, 162, 0.25));
  border-color: rgba(102, 126, 234, 0.3);
}

.reward-icon {
  font-size: 28px;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.reward-description {
  font-weight: 600;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  flex: 1;
}

.no-rewards {
  text-align: center;
  color: rgba(156, 163, 175, 0.8);
  padding: 32px 0;
  font-size: 15px;
  font-weight: 500;
}

.reroll-section {
  border-top: 1px solid rgba(102, 126, 234, 0.2);
  padding-top: 20px;
  margin-top: 20px;
}

.reroll-section h3 {
  margin-bottom: 8px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.reroll-section p {
  margin-top: 0;
  text-align: center;
  color: rgba(160, 174, 192, 0.9);
  margin-bottom: 18px;
  font-size: 14px;
}

.reroll-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reroll-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.reroll-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.reroll-btn:hover::before {
  left: 100%;
}

.ad-reroll {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.ad-reroll:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #059669, #10b981);
}

.ad-reroll:active {
  transform: translateY(0);
}

.ton-reroll {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.ton-reroll:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.ton-reroll:active {
  transform: translateY(0);
}

.store-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  position: relative;
  overflow: hidden;
}

.store-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  pointer-events: none;
  z-index: 0;
}

.slider-btn {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.slider-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.slider-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.slider-btn:active {
  transform: scale(0.98);
}

.store-section {
  display: none;
  animation: fadeInUp 0.4s ease-out;
}

.store-section.active {
  display: block;
}

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

/* Energy Modal */
.energy-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.energy-modal.show {
  display: flex;
}

/* Energy Modal - Modern Design */
.energy-modal-content {
  background: linear-gradient(135deg, #1a1d29 0%, #252936 100%);
  border-radius: 20px;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  border: 2px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.1);
  position: relative;
  animation: energyModalSlideIn 0.3s ease-out;
}

@keyframes energyModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.energy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-primary);
  font-size: 24px;
  z-index: 10;
}

.energy-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.energy-modal-header {
  text-align: center;
  padding: 32px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

.energy-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: energyPulse 2s ease-in-out infinite;
}

@keyframes energyPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  }
}

.energy-modal-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.energy-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.energy-modal-body {
  padding: 0 24px 24px;
}

/* Energy Status Card */
.energy-status-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.energy-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.energy-status-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.energy-status-value {
  font-size: 18px;
  font-weight: 700;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.energy-progress-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.energy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  position: relative;
}

.energy-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: energyShimmer 2s infinite;
}

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

.energy-timer {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 8px;
  opacity: 0.8;
}

/* Energy Restore Options */
.energy-restore-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.energy-restore-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.energy-restore-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.energy-restore-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.energy-restore-card:hover::before {
  opacity: 1;
}

.energy-restore-card.ad-restore {
  border-color: rgba(0, 200, 150, 0.3);
}

.energy-restore-card.ad-restore:hover {
  border-color: rgba(0, 200, 150, 0.5);
}

.energy-restore-card.gem-restore {
  border-color: rgba(74, 158, 255, 0.3);
}

.energy-restore-card.gem-restore:hover {
  border-color: rgba(74, 158, 255, 0.5);
}

.energy-restore-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.energy-restore-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.energy-restore-info {
  flex: 1;
}

.energy-restore-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.energy-restore-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.energy-restore-badge {
  background: rgba(0, 200, 150, 0.2);
  color: #00C896;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid rgba(0, 200, 150, 0.3);
}

.energy-restore-badge.premium {
  background: rgba(74, 158, 255, 0.2);
  color: #4A9EFF;
  border-color: rgba(74, 158, 255, 0.3);
}

.energy-restore-limit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.energy-restore-limit span {
  font-weight: 700;
  color: #FFD700;
}

.energy-restore-cost {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-primary);
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-weight: 600;
}

.gem-icon-small {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.energy-restore-btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.energy-restore-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.energy-restore-btn:hover::before {
  width: 300px;
  height: 300px;
}

.energy-restore-btn .btn-icon {
  font-size: 18px;
  z-index: 1;
}

.energy-restore-btn.ad {
  background: linear-gradient(135deg, #00C896 0%, #00A080 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 200, 150, 0.3);
}

.energy-restore-btn.ad:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 200, 150, 0.4);
}

.energy-restore-btn.ad:active {
  transform: translateY(0);
}

.energy-restore-btn.gems {
  background: linear-gradient(135deg, #4A9EFF 0%, #3A7FD5 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.energy-restore-btn.gems:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 158, 255, 0.4);
}

.energy-restore-btn.gems:active {
  transform: translateY(0);
}

.energy-restore-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Info Banner */
.energy-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.energy-info-banner .info-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .energy-modal-content {
    max-width: 95%;
  }
  
  .energy-icon {
    font-size: 48px;
  }
  
  .energy-modal-header h3 {
    font-size: 20px;
  }
  
  .energy-restore-icon {
    font-size: 28px;
  }
}

/* Merge Modal Styles */
.modal-content.merge-modal {
  max-width: 650px;
  max-height: 90vh;
}

.merge-info-banner {
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-primary);
}

.merge-info-banner .info-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.merge-slots-section {
  margin-bottom: 24px;
}

.merge-slots-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 16px;
  text-align: center;
}

.merge-slots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.merge-arrow {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-primary);
  opacity: 0.6;
}

.merge-result-arrow {
  font-size: 28px;
  opacity: 0.8;
}

.merge-slot {
  width: 90px;
  height: 90px;
  border: 3px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.merge-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(74, 158, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.merge-slot:hover::before {
  opacity: 1;
}

.merge-slot.filled {
  border: 3px solid var(--accent-primary);
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15) 0%, rgba(74, 158, 255, 0.05) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.merge-result-slot {
  width: 90px;
  height: 90px;
  border: 3px dashed rgba(255, 215, 0, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
  transition: all 0.3s ease;
}

.merge-result-empty {
  font-size: 36px;
  opacity: 0.5;
  color: #ffd700;
}

.merge-slot.filled.common {
  border-color: var(--common);
}

.merge-slot.filled.uncommon {
  border-color: var(--uncommon);
}

.merge-slot.filled.rare {
  border-color: var(--rare);
}

.merge-slot.filled.epic {
  border-color: var(--epic);
}

.merge-slot.filled.legendary {
  border-color: var(--legendary);
}

.merge-slot.filled.mythic {
  border-color: var(--mythic);
}

.merge-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.6;
}

.slot-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-secondary);
}

.merge-item-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 8px;
}

.merge-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.merge-item-name {
  font-size: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.merge-success-rate {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.15) 0%, rgba(155, 89, 182, 0.15) 100%);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-primary);
  text-align: center;
  border: 1px solid rgba(74, 158, 255, 0.3);
}

.merge-items-section {
  margin-top: 24px;
}

.merge-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.merge-section-header .section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.merge-filter-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  padding: 8px 32px 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a9eff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.merge-filter-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-primary);
}

.merge-filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.merge-filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-primary);
}

.merge-filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.merge-item-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.merge-item-list::-webkit-scrollbar {
  width: 8px;
}

.merge-item-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.merge-item-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.merge-item-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.merge-item-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.merge-item-card.selected {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.2) 0%, rgba(74, 158, 255, 0.1) 100%);
  box-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
}

.merge-item-card.common {
  border-color: var(--common);
}

.merge-item-card.uncommon {
  border-color: var(--uncommon);
}

.merge-item-card.rare {
  border-color: var(--rare);
}

.merge-item-card.epic {
  border-color: var(--epic);
}

.merge-item-card.legendary {
  border-color: var(--legendary);
}

.merge-item-card.mythic {
  border-color: var(--mythic);
}

.modal-btn-merge {
  background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.modal-btn-merge:hover {
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
}

/* Market Listing Modal Modern Styles */
.step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.market-filters-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Mobile Responsive for Merge Modal */
@media (max-width: 640px) {
  .merge-slots-container {
    gap: 8px;
  }

  .merge-slot,
  .merge-result-slot {
    width: 70px;
    height: 70px;
  }

  .merge-arrow {
    font-size: 20px;
  }

  .merge-result-arrow {
    font-size: 24px;
  }

  .slot-number {
    font-size: 20px;
  }

  .merge-item-icon {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }

  .merge-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .merge-filter-select {
    width: 100%;
  }

  .merge-item-list {
    max-height: 250px;
  }

  .merge-info-banner {
    font-size: 12px;
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .modal-content.merge-modal {
    max-width: 95vw;
    margin: 10px;
  }

  .merge-slots-container {
    gap: 6px;
    justify-content: space-around;
  }

  .merge-slot,
  .merge-result-slot {
    width: 60px;
    height: 60px;
  }

  .merge-arrow {
    font-size: 16px;
  }

  .merge-result-arrow {
    font-size: 20px;
  }

  .slot-number {
    font-size: 18px;
  }

  .merge-item-card {
    padding: 12px;
  }

  .merge-item-icon {
    width: 45px;
    height: 45px;
    font-size: 24px;
  }

  .merge-item-name {
    font-size: 11px;
  }

  .market-filters-modern {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

.merge-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.merge-item-info {
  flex: 1;
}

.merge-item-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.merge-item-rarity.common {
  color: var(--common);
}

.merge-item-rarity.uncommon {
  color: var(--uncommon);
}

.merge-item-rarity.rare {
  color: var(--rare);
}

.merge-item-rarity.epic {
  color: var(--epic);
}

.merge-item-rarity.legendary {
  color: var(--legendary);
}

.merge-item-rarity.mythic {
  color: var(--mythic);
}

.merge-item-quantity {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Enhanced Clan System Styles */

/* Available Clans List Styling */
#available-clans-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.available-clan-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.available-clan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.available-clan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.available-clan-card:hover::before {
  opacity: 1;
}

.available-clan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.available-clan-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.available-clan-info h3::before {
  content: "⚔️";
  font-size: 18px;
}

.clan-level-badge {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
}

.available-clan-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.available-clan-stat {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.available-clan-stat:hover {
  background: rgba(74, 158, 255, 0.1);
  border-color: var(--accent-primary);
}

.available-clan-stat-icon {
  font-size: 20px;
  margin-bottom: 4px;
  display: block;
}

.available-clan-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
  display: block;
}

.available-clan-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.available-clan-requirements {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.available-clan-requirements-text {
  font-size: 12px;
  color: var(--warning);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.available-clan-requirements-text::before {
  content: "🎯";
  font-size: 14px;
}

.join-clan-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--success), #00a085);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
}

.join-clan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 184, 148, 0.4);
  background: linear-gradient(135deg, #00a085, var(--success));
}

.join-clan-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Enhanced Clan Members List */
.clan-members-list {
  max-height: 450px;
  overflow-y: auto;
  padding: 8px;
  margin-bottom: 20px;
}

.clan-member-card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.clan-member-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.clan-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.clan-member-card:hover::before {
  opacity: 1;
}

.clan-member-card.leader {
  border-color: var(--legendary);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 235, 59, 0.05));
}

.clan-member-card.leader::before {
  background: linear-gradient(180deg, var(--legendary), #ffa000);
  opacity: 1;
}

.clan-member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  border: 3px solid var(--accent-primary);
  position: relative;
  flex-shrink: 0;
}

.clan-member-avatar.leader {
  border-color: var(--legendary);
  box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
}

.clan-member-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  z-index: -1;
}

.clan-member-avatar.leader::after {
  background: linear-gradient(45deg, var(--legendary), #ffa000);
}

.clan-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.clan-member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clan-member-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.clan-member-name.leader::after {
  content: "👑";
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 235, 59, 0.6));
}

.clan-member-stats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.clan-member-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.clan-member-stat-icon {
  font-size: 14px;
}

.clan-member-stat-value {
  font-weight: 600;
  color: var(--accent-primary);
}

.clan-member-role {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
}

.clan-member-role.leader {
  background: linear-gradient(135deg, var(--legendary), #ffa000);
  color: white;
  border-color: var(--legendary);
}

.clan-member-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.clan-member-join-date {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.8;
}

.clan-member-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg-secondary);
  position: absolute;
  top: 12px;
  right: 12px;
}

.clan-member-status.offline {
  background: var(--text-secondary);
}

/* Enhanced Leaderboard Styling */
.clan-leaderboard-list,
#leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding: 8px;
}

.clan-leaderboard-list .leaderboard-item {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 2px solid var(--border);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.clan-leaderboard-list .leaderboard-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.clan-leaderboard-list .leaderboard-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  border-color: var(--accent-primary);
}

.clan-leaderboard-list .leaderboard-item:hover::before {
  opacity: 1;
}

.clan-leaderboard-list .leaderboard-item.top3 {
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 235, 59, 0.08));
  border-color: var(--legendary);
  box-shadow: 0 8px 25px rgba(255, 235, 59, 0.2);
}

.clan-leaderboard-list .leaderboard-item.top3::before {
  background: linear-gradient(90deg, var(--legendary), #ffa000);
  opacity: 1;
}

.clan-leaderboard-list .leaderboard-item.top1 {
  background: linear-gradient(135deg, var(--bg-secondary), rgba(255, 215, 0, 0.12));
  border-color: #ffd700;
  box-shadow: 0 12px 30px rgba(255, 215, 0, 0.3);
}

.clan-leaderboard-list .leaderboard-item.top1::before {
  background: linear-gradient(90deg, #ffd700, #ffb300);
}

.clan-leaderboard-list .rank {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--text-primary);
  border: 3px solid var(--border);
  position: relative;
  flex-shrink: 0;
}

.clan-leaderboard-list .rank::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.clan-leaderboard-list .rank:hover::before {
  opacity: 1;
}

.clan-leaderboard-list .rank.top3 {
  background: linear-gradient(135deg, var(--legendary), #ffa000);
  color: white;
  border: 3px solid var(--legendary);
  box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
  font-size: 22px;
}

.clan-leaderboard-list .rank.top1 {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  animation: goldGlow 2s ease-in-out infinite alternate;
}

.clan-leaderboard-list .rank.top1::after {
  content: "👑";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

.clan-leaderboard-list .player-avatar {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
  border: 3px solid var(--accent-primary);
  position: relative;
  flex-shrink: 0;
}

.clan-leaderboard-list .player-avatar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 23px;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  z-index: -1;
}

.clan-leaderboard-list .player-avatar.top3 {
  border-color: var(--legendary);
}

.clan-leaderboard-list .player-avatar.top3::before {
  background: linear-gradient(45deg, var(--legendary), #ffa000);
}

.clan-leaderboard-list .player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
}

.clan-leaderboard-list .player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clan-leaderboard-list .player-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.clan-leaderboard-list .player-name.top3::after {
  content: "⭐";
  font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(255, 235, 59, 0.6));
}

.clan-leaderboard-list .player-name.top1::after {
  content: "🏆";
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

.clan-leaderboard-list .player-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.clan-leaderboard-list .player-score::before {
  content: "💰";
  font-size: 14px;
}

.clan-leaderboard-list .clan-power {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}

.clan-leaderboard-list .clan-power::before {
  content: "⚡";
  font-size: 12px;
}

/* Clan Styles */
.clan-burger-menu {
  position: fixed;
  bottom: 82px; /* Adjusted to avoid overlap with bottom nav */
  right: 16px;
  z-index: 1001; /* Ensure above most content but below modals */
}

.clan-menu-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clan-menu-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.clan-burger-menu .clan-menu-icon {
  transition: transform 0.2s ease;
}
.clan-burger-menu.expanded .clan-menu-icon {
  transform: rotate(90deg);
}

/* When there are unread messages, highlight the burger icon similarly to the message button */
.clan-burger-menu.has-unread .clan-menu-button {
  box-shadow: 0 0 0 4px rgba(74,158,255,0.12), 0 6px 16px rgba(0,0,0,0.25);
}
.clan-burger-menu.has-unread .clan-menu-icon {
  color: var(--accent-primary);
}


/* Expanded buttons when burger is clicked: show message and season-pass buttons */
.clan-expanded-buttons {
  position: absolute;
  bottom: 64px; /* align just above the burger button */
  right: 0;
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 8px;
  transition: opacity 240ms ease, transform 240ms ease;
  opacity: 0;
  transform: translateY(8px);
}

.clan-expanded-buttons.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* When burger has expanded state toggle the buttons visually */
.clan-burger-menu.expanded .clan-expanded-buttons {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Ensure message and season-pass buttons align to the burger and look identical */
.clan-burger-menu .clan-message-button,
.clan-burger-menu .clan-season-pass-button {
  position: static; /* override fixed from the standalone implementation */
  bottom: auto;
  right: auto;
  z-index: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 18px;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.clan-burger-menu .clan-message-button .message-badge {
  top: -4px;
  right: -4px;
}

/* Ensure badge is visible and positioned correctly when used on the burger/its buttons */
.clan-burger-menu .clan-menu-button {
  position: relative; /* so message-badge absolute positions are relative to the button */
}
.clan-burger-menu .message-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}


/* Clan Modal */
.clan-modal {
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.clan-tabs {
  display: flex;
  justify-content: space-around;
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 4px;
  margin: 0 16px 20px;
  border: 1px solid var(--border);
}

.clan-tab {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.clan-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.clan-tab.active {
  color: var(--accent-primary);
  background: var(--bg-secondary);
  box-shadow: 0 2px 8px var(--shadow);
}

.clan-tab-content {
  display: none;
  padding: 0 16px;
}

.clan-tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.clan-info-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 15px var(--shadow);
}

.clan-info-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.clan-stats {
  margin-bottom: 16px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.stat-item {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
}

.stat-item span:first-child {
  font-size: 14px;
  color: var(--text-secondary);
}

.stat-item span:last-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-primary);
}

.clan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.clan-actions .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clan-actions .btn-primary {
  background: var(--accent-primary);
  color: var(--text-primary);
  border: none;
}

.clan-actions .btn-primary:hover {
  background: #3a8ee6;
}

.clan-actions .btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.clan-actions .btn-secondary:hover {
  background: var(--bg-primary);
}

.clan-members-list::-webkit-scrollbar {
  width: 6px;
}

.clan-members-list::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.clan-members-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.clan-leaderboard-list::-webkit-scrollbar {
  width: 6px;
}

.clan-leaderboard-list::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.clan-leaderboard-list::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.event-list .event-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}

.event-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.event-card .status-active {
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0, 184, 148, 0.2); /* Success color with transparency */
}

.clan-currency {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid var(--border);
}

.clan-currency span {
  font-size: 14px;
  color: var(--text-secondary);
}

.clan-currency strong {
  font-size: 16px;
  color: var(--accent-primary);
  font-weight: 600;
}

.shop-items .shop-item-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.shop-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}

.shop-item-card .item-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}

.shop-item-card .item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.shop-item-card .item-info {
  flex: 1;
}

.shop-item-card .item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.shop-item-card .price {
  font-size: 12px;
  color: var(--accent-primary);
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.leaderboard-filters select {
  width: 100%;
  max-width: 200px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}

.leaderboard-filters select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.clan-requirement-message {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border);
  margin: 20px 0;
}

.clan-requirement-message .icon {
  font-size: 48px;
  color: var(--accent-primary);
  margin-bottom: 12px;
}

.clan-requirement-message .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.clan-requirement-message .subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ADDED: General size for merchant modals */
/* Merchant Modal - Modern Size */
.modal-content.merchant-modal-size {
  max-width: 600px;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(26, 26, 38, 0.98) 0%, rgba(18, 18, 28, 0.98) 100%);
  border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Merchant Items Scroll Container - Separate scrollable area */
.merchant-items-scroll-container {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 20px;
  padding-right: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
}

/* Custom scrollbar styling for merchant items container */
.merchant-items-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.merchant-items-scroll-container::-webkit-scrollbar-track {
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
}

.merchant-items-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.4);
  border-radius: 4px;
}

.merchant-items-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.6);
}

/* Merchant Items Grid - Modern Layout with Mobile Optimization */
.merchant-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 0;
  padding: 4px;
}

@media (max-width: 768px) {
  .merchant-items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .merchant-items-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
}

/* Merchant Item Cards - Modern Design with Mobile Optimization */
.merchant-item-card,
.merchant-sell-item-card {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  min-width: 0;
  max-width: 100%;
}

.merchant-item-card::before,
.merchant-sell-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.merchant-item-card:hover::before,
.merchant-sell-item-card:hover::before {
  left: 100%;
}

.merchant-item-card:hover,
.merchant-sell-item-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  border-color: var(--accent-primary);
}

.merchant-item-card:active,
.merchant-sell-item-card:active {
  transform: translateY(-2px) scale(1.01);
}

.merchant-item-card.common,
.merchant-sell-item-card.common {
  border-color: var(--common);
}
.merchant-item-card.uncommon,
.merchant-sell-item-card.uncommon {
  border-color: var(--uncommon);
}
.merchant-item-card.rare,
.merchant-sell-item-card.rare {
  border-color: var(--rare);
}
.merchant-item-card.epic,
.merchant-sell-item-card.epic {
  border-color: var(--epic);
}
.merchant-item-card.legendary,
.merchant-sell-item-card.legendary {
  border-color: var(--legendary);
}
.merchant-item-card.mythic,
.merchant-sell-item-card.mythic {
  border-color: var(--mythic);
}

/* ADDED: Merchant Item Header Styles */
.merchant-item-header,
.merchant-sell-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Merchant Item Icon - Modern Style */
.merchant-item-icon,
.merchant-sell-item-icon {
  width: 70px;
  height: 70px;
  font-size: 36px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(30, 30, 46, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.merchant-item-icon img,
.merchant-sell-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.merchant-item-card:hover .merchant-item-icon img,
.merchant-sell-item-card:hover .merchant-sell-item-icon img {
  transform: scale(1.1);
}

@media (max-width: 480px) {
  .merchant-item-icon,
  .merchant-sell-item-icon {
    width: 80px;
    height: 80px;
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .merchant-item-card,
  .merchant-sell-item-card {
    padding: 16px;
  }
  
  .merchant-item-name,
  .merchant-sell-item-name {
    font-size: 15px;
  }
  
  .merchant-item-price,
  .merchant-sell-price {
    font-size: 13px;
  }
  
  .modal-content.merchant-modal-size {
    max-width: 95%;
    padding: 16px;
  }
}

/* Merchant Item Name Styles with Text Wrapping */
.merchant-item-name,
.merchant-sell-item-name {
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  line-height: 1.3;
}

/* Merchant Item Rarity Styles */
.merchant-item-rarity,
.merchant-sell-item-rarity {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  display: inline-block;
}

/* Merchant Item Price Styles with Wrapping */
.merchant-item-price,
.merchant-sell-price {
  font-size: 14px;
  color: var(--legendary);
  margin-top: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Gold Icon Small Styles */
.gold-icon-small {
  margin-left: 4px;
}

/* Merchant Actions Styles */
.merchant-actions {
  margin-top: 16px;
}

/* Buy Merchant Button Styles */
.buy-merchant-btn {
  background: var(--success);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none; /* ADDED */
  cursor: pointer; /* ADDED */
  transition: background 0.3s; /* ADDED */
  font-weight: 600; /* ADDED */
}

.buy-merchant-btn:hover {
  background: #00a085;
}

/* No Items Styles */
.no-items {
  color: var(--text-secondary);
  font-size: 16px;
  font-style: italic;
  padding: 40px 20px;
}

/* Merchant Sell Modal Body Styles */
#merchant-sell-modal .modal-body {
  padding: 20px 24px;
}

/* Filter Controls Styles */
/* Filter Controls - Modern Design */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.5) 0%, rgba(30, 30, 46, 0.5) 100%);
  border-radius: 12px;
  border: 1px solid rgba(74, 74, 90, 0.5);
}

.filter-controls select {
  flex: 1;
  min-width: 140px;
  padding: 11px 36px 11px 12px;
  border-radius: 10px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  background: rgba(30, 30, 46, 0.8);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(102, 126, 234, 0.6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.filter-controls select:hover {
  border-color: rgba(102, 126, 234, 0.4);
  background-color: rgba(30, 30, 46, 0.95);
}

.filter-controls select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

@media (max-width: 480px) {
  .filter-controls {
    padding: 12px;
    gap: 10px;
  }
  
  .filter-controls select {
    min-width: 100%;
    padding: 10px 32px 10px 10px;
    font-size: 13px;
  }
}

/* Inventory Grid Styles */
.inventory-grid {
  display: grid; /* ADDED */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* ADDED */
  gap: 16px;
}

/* Merchant Sell Item Quantity Styles */
.merchant-sell-item-quantity {
  color: var(--text-secondary);
  font-size: 12px; /* ADDED for consistency */
  margin-top: 4px; /* ADDED for spacing */
}

/* ADDED: Merchant Item Info Styles */
.merchant-item-info,
.merchant-sell-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Selected Item Preview Styles */
.selected-item-preview {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  border: 2px dashed var(--border);
  display: flex; /* ADDED */
  align-items: center; /* ADDED */
  gap: 16px;
}

/* Selected Item Sell Icon Container Styles */
.selected-item-sell-icon-container {
  width: 60px;
  height: 60px;
  font-size: 28px;
  margin-right: 16px;
  background: var(--bg-secondary);
  border-radius: 8px; /* ADDED */
  display: flex; /* ADDED */
  align-items: center; /* ADDED */
  justify-content: center; /* ADDED */
  overflow: hidden; /* ADDED */
}
/* ADDED: Image styling for selected item sell icon */
.selected-item-sell-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* Selected Item Sell Name Styles */
.selected-item-sell-name {
  font-size: 18px;
  font-weight: 600; /* ADDED */
  color: var(--text-primary); /* ADDED */
}

/* Selected Item Sell Rarity Styles */
.selected-item-sell-rarity {
  font-size: 12px;
  padding: 2px 6px;
  text-transform: uppercase; /* ADDED */
  font-weight: 600; /* ADDED */
}

/* Selected Item Sell Suggested Price and Price Per Item Styles */
.selected-item-sell-suggested-price,
.selected-item-sell-price-per-item {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px; /* ADDED */
}

/* Input Group Styles */
.input-group {
  margin-bottom: 16px;
}

.input-group label {
  color: var(--text-primary);
  font-weight: 600; /* ADDED */
  margin-bottom: 8px; /* ADDED */
  display: block; /* ADDED */
}

.input-group input[type="number"] {
  width: 100%; /* ADDED */
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 16px;
}
.input-group input[type="number"]:focus {
  /* ADDED */
  outline: none;
  border-color: var(--accent-primary);
}

/* Total Sell Price Styles */
.total-sell-price {
  margin-top: 24px;
  color: var(--legendary);
  font-size: 18px; /* ADDED for prominence */
  font-weight: 700; /* ADDED for prominence */
  text-align: center; /* ADDED */
}

/* Merchant Status Message Styles */
/* Merchant Status Message - Modern Alert Style */
.merchant-status-message,
.status-message {
  background: linear-gradient(135deg, rgba(253, 203, 110, 0.15) 0%, rgba(253, 203, 110, 0.08) 100%);
  color: var(--warning);
  border: 2px solid rgba(253, 203, 110, 0.4);
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(253, 203, 110, 0.1);
  position: relative;
  overflow: hidden;
}

.merchant-status-message::before,
.status-message::before {
  content: '⚠️';
  font-size: 20px;
  margin-right: 8px;
}

/* Blurred Merchant Items Grid Styles */
.merchant-items-grid.blurred {
  filter: blur(5px);
  pointer-events: none;
}

/* Modal Actions for Merchant Sell Confirmation */
.modal-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  justify-content: center;
}

/* Pagination Container - Modern Design */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.4) 0%, rgba(30, 30, 46, 0.4) 100%);
  border-radius: 12px;
  border: 1px solid rgba(74, 74, 90, 0.5);
}

.pagination-container button {
  min-width: 100px;
}

#sales-page-info,
#listings-page-info {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 12px;
}

@media (max-width: 480px) {
  .pagination-container {
    padding: 12px;
    gap: 10px;
  }
  
  .pagination-container button {
    min-width: 80px;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  #sales-page-info,
  #listings-page-info {
    font-size: 12px;
    padding: 0 8px;
  }
}

/* TASKS */

.task {
  --adsgram-task-font-size: 16px;
  --adsgram-task-icon-size: 50px;
  --adsgram-task-icon-title-gap: 15px;
  --adsgram-task-button-width: 60px;
  --adsgram-task-icon-border-radius: 8px;

  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.task::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.task:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
  border-color: var(--accent-primary);
}

.task:hover::before {
  transform: scaleY(1);
}

.task.completed {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(39, 174, 96, 0.05));
  border-color: var(--success);
}

.task.completed::before {
  background: var(--success);
  transform: scaleY(1);
}

.task__reward {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: var(--accent-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 8px;
  width: fit-content;
}

.task__button {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
}

.task__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.task__button:active {
  transform: translateY(0);
}

.task__button_claim {
  background: linear-gradient(135deg, #ffd24c, #ffb300);
  color: #000;
  box-shadow: 0 4px 12px rgba(255, 210, 76, 0.4);
  animation: pulse-claim 2s ease-in-out infinite;
}

@keyframes pulse-claim {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(255, 210, 76, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 210, 76, 0.6);
  }
}

.task__button_claim:hover {
  background: linear-gradient(135deg, #ffb300, #ff9800);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 24px rgba(255, 179, 0, 0.5);
}

.task__button_done {
  background: linear-gradient(135deg, var(--success), #00a085);
  color: white;
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.task__button_done:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.task-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.loading-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999999; /* ÜBER allem - über alle Modals */
  pointer-events: auto; /* Standardblockierung */
  color: #fff;
  font-size: 1.2rem;
}

.loading-spinner-container.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7); /* wie overlay: dunkler Hintergrund */
}

.loading-spinner-container.element-specific {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(42, 42, 42, 0.8); /* heller Hintergrund */
  pointer-events: none; /* nur außerhalb klickbar */
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8774e1; /* Telegram-ähnliche Farbe */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-spinner-text {
  font-weight: bold;
  text-align: center;
  color: #fff;
}

/* für Interaktionssperre */
body.loading {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; /* Wichtig für ::before */
  pointer-events: auto; /* Block all interactions with underlying elements */
}

/* 🔽 Hintergrundbild mit niedriger Deckkraft */
#loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/TraderLegends.png"); /* <== Pfad anpassen */
  background-size: cover;
  background-position: center;
  opacity: 0.6; /* <== Deckkraft anpassen */
  z-index: -1;
  pointer-events: none;
}

.loading-logo-img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--bg-tertiary);
  padding: 8px;
}

.loading-text {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  margin: 20px 0;
}

.loading-progress {
  width: 200px;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.loading-progress-bar {
  width: 0; /* Initial auf 0, wird durch JavaScript gesetzt */
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width 0.3s ease; /* Sanfte Übergänge ohne Animation */
}

.loading-tip {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 20px 0;
}

.loading-debug {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 20px;
}

.loading-terms {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 12px;
  text-align: center;
}

.loading-terms-link {
  color: var(--text-secondary);
  text-decoration: underline;
}

.affiliate-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.level-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.affiliate-link-section {
  margin-bottom: 15px;
}

.affiliate-link-section label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.affiliate-link-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.affiliate-link-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.affiliate-link-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: #333;
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
}

.affiliate-link-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.copy-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.3s;
}

.copy-btn:hover {
  background: #45a049;
}

.copy-btn:active {
  transform: scale(0.95);
}

/* Affiliate Section */
.affiliate-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 4px 15px var(--shadow);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.level-badge {
  background: var(--bg-tertiary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.affiliate-link-section {
  margin-bottom: 15px;
}

.affiliate-link-section label {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.affiliate-link-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.affiliate-link-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.affiliate-link-input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
}

.affiliate-link-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.copy-btn {
  background: var(--success);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.3s;
}

.copy-btn:hover {
  background: #00a085;
}

.copy-btn:active {
  transform: scale(0.95);
}

.affiliate-stats-section {
  margin-top: 20px;
}

.affiliate-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.affiliate-stat-card {
  background: var(--bg-tertiary);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border);
}

.affiliate-stat-card .stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.affiliate-stat-card .stat-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-primary);
}

.affiliate-details-link {
  text-align: center;
  margin-top: 16px;
}

.details-link {
  color: var(--accent-primary);
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
}

.details-link:hover {
  color: #3a8ee6;
}

.details-btn {
  width: 100%;
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s;
}

.details-btn:hover {
  background: #3a8ee6;
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .affiliate-link-container {
    flex-direction: column;
    gap: 8px;
  }

  .affiliate-link-input {
    width: 100%;
  }

  .copy-btn {
    width: 100%;
  }

  .affiliate-stats {
    grid-template-columns: 1fr;
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .stat-label,
  .stat-value {
    display: inline;
  }

  .clan-members-list,
  .clan-leaderboard-list {
    max-height: 300px;
    padding-right: 4px;
  }

  .clan-members-list .leaderboard-item,
  .clan-leaderboard-list .leaderboard-item {
    padding: 12px;
    gap: 12px;
  }

  .clan-members-list .player-avatar,
  .clan-leaderboard-list .player-avatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .clan-members-list .player-name,
  .clan-leaderboard-list .player-name {
    font-size: 14px;
  }

  .clan-members-list .player-score,
  .clan-leaderboard-list .player-score {
    font-size: 12px;
  }

  .clan-members-list .player-role,
  .clan-leaderboard-list .clan-power {
    font-size: 11px;
  }

  .clan-leaderboard-list .rank {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .clan-menu-button {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  /* removed legacy .clan-menu-dropdown and .clan-menu-item styles (no longer used) */

  .clan-modal {
    width: 95%;
  }

  .clan-tabs {
    flex-direction: column;
    margin: 0 12px 16px;
  }

  .clan-tab {
    padding: 10px;
    font-size: 13px;
  }

  .clan-tab-content {
    padding: 0 12px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .clan-actions {
    flex-direction: column;
    gap: 8px;
  }

  .clan-actions .btn {
    width: 100%;
    padding: 12px;
  }

  .clan-members-list .leaderboard-item {
    padding: 10px;
  }
}

/* Loading States */
.clan-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  flex-direction: column;
  gap: 16px;
}

.clan-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.clan-loading-text {
  font-size: 16px;
  font-weight: 600;
}

/* Empty States */
.clan-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.clan-empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.clan-empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.clan-empty-state-description {
  font-size: 14px;
  line-height: 1.5;
  max-width: 300px;
  margin: 0 auto;
}

/* ===== SEASON PASS STYLES ===== */

/* Season Pass Modal */
#season-pass-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#season-pass-modal.show {
  display: flex;
}

.season-pass-modal-content {
  background: var(--bg-secondary);
  border-radius: 16px;
  max-width: 900px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Season Pass Header */
.season-pass-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(135deg, rgba(74, 158, 255, 0.1), rgba(108, 92, 231, 0.1));
}

.season-pass-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.season-pass-progress {
  margin-top: 16px;
}

.progress-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  height: 24px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width 0.5s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

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

/* Season Pass Content */
#season-pass-content {
  padding: 24px;
}

/* Season Pass Rewards Grid */
.season-pass-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Season Pass Day Card */
.season-pass-day {
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.season-pass-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border);
  transition: all 0.3s ease;
}

/* Available Day - Ready to Claim */
.season-pass-day.available {
  border-color: var(--success);
  background: rgba(0, 184, 148, 0.05);
  animation: pulse-glow 2s infinite;
}

.season-pass-day.available::before {
  background: linear-gradient(90deg, var(--success), #00d2a0);
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 184, 148, 0.5);
  }
}

/* Claimed Day */
.season-pass-day.claimed {
  opacity: 0.6;
  border-color: var(--accent-primary);
  background: rgba(74, 158, 255, 0.05);
}

.season-pass-day.claimed::before {
  background: var(--accent-primary);
}

.season-pass-day.claimed::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: white;
}

/* Locked Day */
.season-pass-day.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.season-pass-day.locked::after {
  content: '🔒';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
  opacity: 0.5;
}

/* Missed Day */
.season-pass-day.missed {
  opacity: 0.5;
  border-color: var(--error);
  background: rgba(225, 112, 85, 0.05);
}

.season-pass-day.missed::before {
  background: var(--error);
}

/* Day Number */
.day-number {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Day Reward */
.day-reward {
  margin: 12px 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.seasonpass-reward-icon {
  font-size: 2.2em;
  display: block;
  text-align: center;
  line-height: 1;
}

.reward-icon.emoji {
  font-size: 36px;
  line-height: 48px;
}

.reward-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
}

/* Day Status */
.day-status {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.season-pass-day.available .day-status {
  color: var(--success);
  background: rgba(0, 184, 148, 0.15);
}

.season-pass-day.claimed .day-status {
  color: var(--accent-primary);
  background: rgba(74, 158, 255, 0.15);
}

.season-pass-day.locked .day-status {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

.season-pass-day.missed .day-status {
  color: var(--error);
  background: rgba(225, 112, 85, 0.15);
}

/* Claim Reward Button */
.claim-reward-btn {
  background: var(--success);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 100%;
}

.claim-reward-btn:hover {
  background: #00a085;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.claim-reward-btn:active {
  transform: translateY(0);
}

/* Season Pass Info */
.season-pass-info {
  margin-top: 24px;
  padding: 20px;
  background: rgba(74, 158, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(74, 158, 255, 0.2);
}

.season-pass-info p {
  margin: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.season-pass-info p:first-child {
  margin-top: 0;
}

.season-pass-info p:last-child {
  margin-bottom: 0;
}

/* Rarity-specific styling for items */
.season-pass-day .reward-text.common {
  color: var(--common);
}

.season-pass-day .reward-text.uncommon {
  color: var(--uncommon);
}

.season-pass-day .reward-text.rare {
  color: var(--rare);
}

.season-pass-day .reward-text.epic {
  color: var(--epic);
}

.season-pass-day .reward-text.legendary {
  color: var(--legendary);
}

/* Special styling for final day */
.season-pass-day:last-child.available {
  border-color: var(--legendary);
  background: rgba(255, 235, 59, 0.05);
  animation: pulse-legendary 2s infinite;
}

.season-pass-day:last-child.available::before {
  background: linear-gradient(90deg, var(--legendary), #ffd700);
}

@keyframes pulse-legendary {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 235, 59, 0.6);
  }
}

/* Close Button for Season Pass Modal */
.season-pass-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 1;
}

.season-pass-close:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
  transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .season-pass-rewards-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  
  .season-pass-day {
    padding: 12px;
  }
  
  .day-number {
    font-size: 14px;
  }
  
  .reward-icon {
    width: 40px;
    height: 40px;
  }
  
  .reward-text {
    font-size: 12px;
  }
  
  .season-pass-header h2 {
    font-size: 20px;
  }

  /* Expedition Cards Mobile Optimization */
  .expedition-card {
    padding: 18px;
    border-radius: 16px;
  }

  .expedition-header {
    flex-direction: row;
    gap: 10px;
  }

  .expedition-info h3 {
    font-size: 17px;
  }

  .expedition-difficulty {
    padding: 6px 12px;
    font-size: 11px;
  }

  .expedition-rewards {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .expedition-badges {
    justify-content: center;
  }

  .expedition-button {
    padding: 14px;
    font-size: 14px;
  }

  .expedition-refresh-section {
    padding: 20px;
  }

  .expedition-refresh-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .season-pass-rewards-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  
  .season-pass-modal-content {
    width: 98%;
    max-height: 95vh;
  }
  
  #season-pass-content {
    padding: 16px;

  /* Expedition Cards Mobile Optimization */
  .expedition-card {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .expedition-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .expedition-info h3 {
    font-size: 16px;
  }

  .expedition-duration {
    font-size: 12px;
  }

  .expedition-difficulty {
    padding: 6px 12px;
    font-size: 10px;
    align-self: flex-start;
  }

  .expedition-rewards {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    margin-bottom: 14px;
  }

  .reward-text {
    font-size: 12px;
  }

  .expedition-badges {
    gap: 8px;
    justify-content: flex-start;
    margin-bottom: 12px;
  }

  .expedition-xp-badge {
    padding: 5px 10px;
    font-size: 11px;
  }

  .expedition-stats {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .expedition-stats > div {
    justify-content: space-between;
  }

  .expedition-button {
    padding: 13px;
    font-size: 13px;
    border-radius: 12px;
  }

  .expedition-progress {
    padding: 18px;
    border-radius: 16px;
  }

  .expedition-progress h3 {
    font-size: 16px;
  }

  .progress-bar {
    height: 10px;
    margin: 12px 0;
  }

  .expedition-timer {
    font-size: 15px;
  }

  .expedition-refresh-section {
    padding: 18px;
    border-radius: 16px;
    margin-bottom: 18px;
  }

  .refresh-info h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .refresh-info p {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .expedition-refresh-btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 12px;
  }
  
  .season-pass-header {
    padding: 16px;
  }
}

/* Scrollbar Styling for Season Pass */
.season-pass-modal-content::-webkit-scrollbar {
  width: 8px;
}

.season-pass-modal-content::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.season-pass-modal-content::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.season-pass-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

.clan-message-button .message-icon { color: var(--text-primary); }
.message-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none; /* hidden by default; JS toggles to inline-flex when unread */
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
}

/* ===== QUESTS MODAL STYLES ===== */
.quests-modal {
  max-width: 950px;
  width: 92%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(30, 40, 55, 0.98), rgba(20, 25, 35, 0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


.quests-modal .modal-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Quest Tabs */
.quest-tabs {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent);
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.quest-tabs::-webkit-scrollbar {
  height: 4px;
}

.quest-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.quest-tabs::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 2px;
}

.quest-tab {
  flex: 1;
  min-width: 110px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.5), rgba(30, 40, 55, 0.5));
  border: 1px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quest-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
  transition: left 0.6s ease;
}

.quest-tab:hover::before {
  left: 100%;
}

.quest-tab:hover {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.8), rgba(30, 40, 55, 0.8));
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.quest-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-2px);
}

.quest-tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f093fb, #667eea, #764ba2);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.8);
}

.quest-tab-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.quest-tab-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.quest-tab-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: #fff;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
  border: 2px solid rgba(30, 40, 55, 0.9);
  box-shadow: 0 4px 12px rgba(245, 87, 108, 0.6), 0 0 20px rgba(245, 87, 108, 0.4);
  animation: questBadgePulse 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes questBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.6), 0 0 20px rgba(245, 87, 108, 0.4);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(245, 87, 108, 0.8), 0 0 30px rgba(245, 87, 108, 0.6);
  }
}

/* Quest Content */
.quest-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.quest-content::-webkit-scrollbar {
  width: 8px;
}

.quest-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.quest-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea, #764ba2);
  border-radius: 4px;
}

.quest-tab-content {
  display: none;
}

.quest-tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

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

/* Quest Reset Timer Card */
.quest-reset-timer-card {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}

.quest-reset-timer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
  transition: left 0.8s ease;
}

.quest-reset-timer-card:hover::before {
  left: 100%;
}

.quest-reset-timer-card:hover {
  border-color: rgba(102, 126, 234, 0.6);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
}

.reset-timer-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
  animation: timerPulse 2s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 30px rgba(102, 126, 234, 1));
  }
}

.reset-timer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reset-timer-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reset-timer-value {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.reset-timer-value.reset-imminent {
  animation: timerWarning 1s ease-in-out infinite;
}

@keyframes timerWarning {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.reset-timer-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* Quest Groups */
.quest-groups {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.quest-group {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.6), rgba(30, 40, 55, 0.6));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 20px;
  padding: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.quest-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
}

.quest-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
}

.quest-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.quest-group-title {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, #a0aec0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.quest-group-progress {
  font-size: 13px;
  color: rgba(160, 174, 192, 0.9);
  font-weight: 700;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Quest Items */
.quest-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quest-item {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.7), rgba(30, 30, 46, 0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(102, 126, 234, 0.15);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quest-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  transition: width 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.quest-item:hover {
  transform: translateX(3px);
  border-color: rgba(102, 126, 234, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.quest-item:hover::before {
  width: 100%;
}

.quest-item.completed {
  border-color: rgba(46, 204, 113, 0.3);
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(39, 174, 96, 0.1));
}

.quest-item.completed::before {
  width: 100%;
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.15) 0%, rgba(39, 174, 96, 0.15) 100%);
}

.quest-item.claimable {
  border-color: #2ecc71;
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: questClaimPulse 2s ease-in-out infinite;
}

.quest-item.claimable::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(46, 204, 113, 0.15) 0%, transparent 70%);
  animation: questClaimRotate 4s linear infinite;
  pointer-events: none;
}

@keyframes questClaimPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 45px rgba(46, 204, 113, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

@keyframes questClaimRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.quest-item-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
  border: 1px solid rgba(102, 126, 234, 0.2);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.quest-item-info {
  flex: 1;
  z-index: 1;
  min-width: 0;
}

.quest-item-description {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.quest-item-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quest-progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(102, 126, 234, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 6px;
  position: relative;
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.quest-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 6px 6px 0 0;
}

.quest-item.completed .quest-progress-fill {
  background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.6);
}

.quest-progress-text {
  font-size: 12px;
  color: rgba(160, 174, 192, 0.9);
  font-weight: 700;
  min-width: 65px;
  text-align: right;
}

.quest-item-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
  flex-shrink: 0;
}

.quest-reward-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  border: 1px solid rgba(102, 126, 234, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.quest-reward-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-reward-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.quest-claim-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
  position: relative;
  overflow: hidden;
}

.quest-claim-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.quest-claim-btn:hover::before {
  left: 100%;
}

.quest-claim-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.5);
}

.quest-claim-btn:active {
  transform: translateY(0) scale(0.98);
}

.quest-claim-btn:disabled {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.5), rgba(30, 40, 55, 0.5));
  color: rgba(160, 174, 192, 0.5);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quest-item.completed .quest-claim-btn {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.5), rgba(30, 40, 55, 0.5));
  color: rgba(160, 174, 192, 0.6);
  box-shadow: none;
}

/* No Quests Message */
.no-quests {
  text-align: center;
  padding: 60px 20px;
  color: rgba(160, 174, 192, 0.7);
  font-size: 16px;
  font-weight: 500;
}

.no-quests::before {
  content: '📋';
  display: block;
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.4;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .quests-modal {
    width: 96%;
    max-height: 90vh;
  }

  .quest-tabs {
    padding: 16px 12px;
    gap: 8px;
  }

  .quest-tab {
    min-width: 90px;
    padding: 12px 14px;
  }

  .quest-tab-icon {
    font-size: 22px;
  }

  .quest-tab-label {
    font-size: 10px;
  }

  .quest-tab-badge {
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .quest-content {
    padding: 16px;
  }

  .quest-reset-timer-card {
    padding: 16px;
    gap: 12px;
    margin-bottom: 18px;
  }

  .reset-timer-icon {
    font-size: 36px;
  }

  .reset-timer-label {
    font-size: 12px;
  }

  .reset-timer-value {
    font-size: 22px;
    letter-spacing: 1px;
  }

  .quest-groups {
    gap: 18px;
  }

  .quest-group {
    padding: 16px;
    border-radius: 16px;
  }

  .quest-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .quest-group-title {
    font-size: 16px;
  }

  .quest-group-progress {
    font-size: 12px;
    padding: 4px 12px;
  }

  .quest-items {
    gap: 12px;
  }

  .quest-item {
    padding: 14px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .quest-item-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 28px;
  }

  .quest-item-info {
    flex: 1;
    min-width: 200px;
  }

  .quest-item-description {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .quest-progress-bar {
    height: 8px;
  }

  .quest-progress-text {
    font-size: 11px;
    min-width: 55px;
  }

  .quest-item-reward {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .quest-reward-display {
    padding: 8px 14px;
    font-size: 13px;
  }

  .quest-reward-icon {
    width: 20px;
    height: 20px;
  }

  .quest-claim-btn {
    padding: 10px 20px;
    font-size: 12px;
  }

  .no-quests {
    padding: 40px 16px;
    font-size: 14px;
  }

  .no-quests::before {
    font-size: 56px;
    margin-bottom: 16px;
  }
}

/* ===== ACHIEVEMENT MILESTONE TRACKER STYLES ===== */
.achievement-milestone-tracker {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.milestone-header {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.milestone-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) transparent;
}

.milestone-progress-container::-webkit-scrollbar {
  height: 6px;
}

.milestone-progress-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.milestone-progress-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
}

.milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone-item:hover {
  transform: translateY(-4px) scale(1.05);
}

.milestone-connector {
  position: absolute;
  left: -50%;
  top: 32px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  z-index: 0;
}

.milestone-connector.first {
  display: none;
}

.milestone-marker {
  position: relative;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.8), rgba(30, 40, 55, 0.8));
  border: 3px solid rgba(102, 126, 234, 0.3);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.milestone-status-icon {
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.milestone-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.milestone-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.milestone-reward-amount {
  font-weight: 700;
}

/* Milestone States */
.milestone-item.locked .milestone-marker {
  background: linear-gradient(135deg, rgba(30, 30, 46, 0.5), rgba(20, 20, 36, 0.5));
  border-color: rgba(100, 100, 120, 0.3);
  opacity: 0.6;
}

.milestone-item.locked .milestone-status-icon {
  opacity: 0.5;
}

.milestone-item.locked .milestone-reward {
  opacity: 0.5;
}

.milestone-item.active .milestone-marker {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  border-color: #667eea;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: milestoneActivePulse 2s ease-in-out infinite;
}

.milestone-item.active .milestone-status-icon {
  animation: milestoneArrowBounce 1s ease-in-out infinite;
}

@keyframes milestoneActivePulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.7), 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

@keyframes milestoneArrowBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  }
}

.milestone-item.claimable .milestone-marker {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.3));
  border-color: #2ecc71;
  box-shadow: 0 0 30px rgba(46, 204, 113, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: milestoneClaimPulse 1.5s ease-in-out infinite;
}

.milestone-item.claimable .milestone-status-icon {
  color: #2ecc71;
  animation: milestoneExclamationBounce 0.8s ease-in-out infinite;
}

@keyframes milestoneClaimPulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 45px rgba(46, 204, 113, 0.8), 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
  }
}

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

.milestone-item.claimed .milestone-marker {
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.2));
  border-color: rgba(46, 204, 113, 0.5);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2);
}

.milestone-item.claimed .milestone-status-icon {
  color: #2ecc71;
  font-size: 20px;
}

.milestone-item.claimed .milestone-reward {
  border-color: rgba(46, 204, 113, 0.3);
  background: rgba(46, 204, 113, 0.1);
}

/* Mobile Responsive for Milestone Tracker */
@media (max-width: 768px) {
  .achievement-milestone-tracker {
    padding: 12px;
  }

  .milestone-header {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .milestone-progress-container {
    gap: 6px;
    padding: 8px 4px;
  }

  .milestone-item {
    min-width: 70px;
  }

  .milestone-marker {
    width: 56px;
    height: 56px;
  }

  .milestone-status-icon {
    font-size: 16px;
  }

  .milestone-value {
    font-size: 10px;
  }

  .milestone-reward {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .milestone-item {
    min-width: 60px;
  }

  .milestone-marker {
    width: 48px;
    height: 48px;
  }

  .milestone-status-icon {
    font-size: 14px;
  }

  .milestone-value {
    font-size: 9px;
  }

  .milestone-reward {
    padding: 3px 6px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .quest-tab {
    min-width: 75px;
    padding: 10px 8px;
  }

  .quest-tab-icon {
    font-size: 20px;
  }

  .quest-tab-label {
    font-size: 9px;
  }

  .quest-item {
    padding: 12px;
  }

  .quest-item-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 24px;
  }

  .quest-item-info {
    min-width: 150px;
  }

  .quest-reward-display {
    padding: 6px 10px;
    font-size: 12px;
  }

  .quest-claim-btn {
    padding: 8px 16px;
    font-size: 11px;
  }
}

/* Task Badge - Red variant for available tasks */
.task-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none; /* hidden by default; JS toggles to inline-flex when tasks available */
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
  animation: taskBadgePulse 2s ease-in-out infinite;
}

@keyframes taskBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(255, 107, 107, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.15);
  }
}

/* Task badge positioning for nav-item */
.nav-item {
  position: relative;
}

.nav-item .task-badge {
  top: 4px;
  right: 4px;
}

/* Task badge positioning for slider button */
.slider-btn .task-badge {
  position: absolute;
  top: -8px;
  right: -8px;
}
/* Reuse .clan-menu-button hover styles for visual consistency */

/* message button no longer uses a fixed-positioned layout; it now lives inside the burger menu */

/* Messages Modal */
.messages-modal {
  width: 540px;
  max-width: calc(100% - 40px);
}
.messages-list-container {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.message-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
.message-card.unread {
  background: linear-gradient(90deg, rgba(102,126,234,0.08), rgba(118,75,162,0.03));
  border-left: 4px solid var(--accent-primary);
}
.message-card .message-title {
  font-weight: 600;
  margin-bottom: 6px;
}
.message-card .message-time {
  font-size: 12px;
  color: var(--text-secondary);
}
.message-detail {
  background: transparent;
  padding: 12px 8px;
}

.message-detail h4{ margin:0 0 8px; }
.message-detail #message-detail-body{ white-space: pre-wrap; }

/* Slot Selection Modal */
#slot-selection-modal .modal-content {
  max-width: 500px;
}

.slot-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 8px 0;
}

.slot-selection-card {
  background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.slot-selection-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, transparent, rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slot-selection-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--accent-primary);
}

.slot-selection-card:hover::before {
  opacity: 1;
}

.slot-selection-card:active {
  transform: translateY(-2px) scale(1.01);
}

/* Rarity-based borders for slot cards */
.slot-selection-card.common {
  border-color: var(--rarity-common);
  background: linear-gradient(145deg, 
    rgba(158, 158, 158, 0.1), 
    var(--bg-secondary));
}

.slot-selection-card.uncommon {
  border-color: var(--rarity-uncommon);
  background: linear-gradient(145deg, 
    rgba(30, 255, 0, 0.1), 
    var(--bg-secondary));
}

.slot-selection-card.rare {
  border-color: var(--rarity-rare);
  background: linear-gradient(145deg, 
    rgba(0, 112, 221, 0.15), 
    var(--bg-secondary));
}

.slot-selection-card.epic {
  border-color: var(--rarity-epic);
  background: linear-gradient(145deg, 
    rgba(163, 53, 238, 0.15), 
    var(--bg-secondary));
}

.slot-selection-card.legendary {
  border-color: var(--rarity-legendary);
  background: linear-gradient(145deg, 
    rgba(255, 128, 0, 0.15), 
    var(--bg-secondary));
}

.slot-selection-card.mythic {
  border-color: var(--rarity-mythic);
  background: linear-gradient(145deg, 
    rgba(255, 0, 220, 0.15), 
    var(--bg-secondary));
}

.slot-card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.slot-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.slot-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
  text-align: center;
  margin-bottom: 6px;
}

.slot-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-card-stats {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.slot-card-stats span {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .slot-selection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .slot-selection-card {
    padding: 12px;
  }
  
  .slot-card-icon {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
}

/* ==================== GACHA SYSTEM STYLES ==================== */
:root {
  --primary: #667eea;
  --primary-dark: #764ba2;
  --common: #a0aec0;
  --uncommon: #48bb78;
  --rare: #4299e1;
  --epic: #9f7aea;
  --legendary: #f6ad55;
  --bg-primary: #0f0f23;
  --bg-secondary: #1a1a2e;
  --text-primary: #e2e8f0;
}

.gacha-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 1rem;
}

.gacha-header {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
}

.gacha-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.series-selector {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.series-btn {
  padding: 0.75rem 1rem;
  border: 2px solid transparent;
  border-radius: 20px;
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.series-btn.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  transform: scale(1.05);
}

.gacha-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  gap: 1.5rem;
}

.series-preview {
  display: flex;
  justify-content: center;
  width: 100%;
}

.series-preview-image {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 12px;
  border: 2px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}

.pity-info {
  width: 100%;
  max-width: 300px;
  padding: 1rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.pity-label {
  font-size: 0.85rem;
  color: #a0aec0;
  margin-bottom: 0.5rem;
}

.pity-bar-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pity-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(102, 126, 234, 0.5);
}

.pity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.pity-count {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.85rem;
  min-width: 40px;
}

.draw-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 320px;
}

.draw-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.draw-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: 0;
}

.draw-btn-1 {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.draw-btn-10 {
  background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
}

.draw-btn:hover::before {
  width: 300px;
  height: 300px;
}

.draw-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.draw-btn-1:hover:not(:disabled) {
  background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
  box-shadow: 0 6px 20px rgba(72, 187, 120, 0.5);
}

.draw-btn-10:hover:not(:disabled) {
  background: linear-gradient(135deg, #ed8936 0%, #f6ad55 100%);
  box-shadow: 0 6px 20px rgba(246, 173, 85, 0.5);
}

.draw-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.draw-btn:disabled {
  background: linear-gradient(135deg, #555 0%, #777 100%);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

.btn-label {
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.btn-cost {
  font-size: 11px;
  opacity: 0.95;
  position: relative;
  z-index: 1;
}

.btn-count {
  font-size: 14px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.gacha-footer {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.info-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.info-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.info-btn:hover::before {
  width: 300px;
  height: 300px;
}

.info-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.info-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.info-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: scale(1.1);
}

/* GACHA OPENING MODAL */
.gacha-opening-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: hidden;
}

.gacha-opening-modal.active {
  display: flex;
}

.gacha-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
  left: 0;
  top: 0;
  filter: brightness(0.5) contrast(1.1);
}

.opening-item-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.opening-hint {
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  animation: fadeInOut 2s ease-in-out infinite;
  letter-spacing: 0.5px;
}

.opening-draw-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.skip-button {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 59, 48, 0.8);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 1rem;
  display: none;
}

.skip-button:hover {
  background: rgba(255, 59, 48, 1);
  transform: scale(1.05);
}

@keyframes breathing {
  0%, 100% { box-shadow: 0 0 20px rgba(246, 173, 85, 0.6), inset 0 0 20px rgba(246, 173, 85, 0.3); }
  50% { box-shadow: 0 0 40px rgba(246, 173, 85, 1), inset 0 0 40px rgba(246, 173, 85, 0.6); }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.opening-item-name {
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  animation: slideDown 0.5s ease;
  z-index: 10;
  position: relative;
  filter: none !important;
  -webkit-filter: none !important;
}

.opening-item-name.common { color: var(--common); }
.opening-item-name.uncommon { color: var(--uncommon); }
.opening-item-name.rare { color: var(--rare); }
.opening-item-name.epic { color: var(--epic); }
.opening-item-name.legendary { color: var(--legendary); }

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

.opening-item-icon {
  font-size: 6rem;
  animation: itemPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.93);
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 10;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.opening-item-icon.uncommon { animation: itemPopGreen 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.opening-item-icon.rare { animation: itemPopBlue 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.opening-item-icon.epic { animation: itemPopPurple 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.opening-item-icon.legendary { 
  animation: itemPopGoldDramatic 3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 20px rgba(246, 173, 85, 0.6), inset 0 0 20px rgba(246, 173, 85, 0.3);
}

.gacha-opening-modal.active .opening-item-icon.legendary {
  animation: itemPopGoldDramatic 3s cubic-bezier(0.34, 1.56, 0.64, 1), breathing 2s ease-in-out 3s infinite;
}

@keyframes itemPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes itemPopGreen {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { filter: drop-shadow(0 0 15px rgba(72, 187, 120, 0.8)); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes itemPopBlue {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { filter: drop-shadow(0 0 15px rgba(66, 153, 225, 0.8)); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes itemPopPurple {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { filter: drop-shadow(0 0 15px rgba(159, 122, 234, 0.8)); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes itemPopGoldDramatic {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; filter: drop-shadow(0 0 0px rgba(246, 173, 85, 0)); }
  20% { transform: scale(1.3) rotate(20deg); filter: drop-shadow(0 0 40px rgba(246, 173, 85, 0.8)); }
  40% { transform: scale(1.1) rotate(-15deg); filter: drop-shadow(0 0 60px rgba(246, 173, 85, 1)); }
  60% { transform: scale(1.15) rotate(10deg); filter: drop-shadow(0 0 80px rgba(246, 173, 85, 1)); }
  80% { transform: scale(1.08) rotate(-5deg); filter: drop-shadow(0 0 50px rgba(246, 173, 85, 0.9)); }
  100% { transform: scale(1) rotate(0); opacity: 1; filter: drop-shadow(0 0 30px rgba(246, 173, 85, 0.8)); }
}

@keyframes legendaryParticles {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; filter: brightness(1.2); }
  25% { transform: translate(var(--tx) * 0.3, var(--ty) * 0.3) scale(1); opacity: 1; }
  50% { transform: translate(var(--tx) * 0.7, var(--ty) * 0.7) scale(0.8); opacity: 0.8; }
  75% { transform: translate(var(--tx) * 0.9, var(--ty) * 0.9) scale(0.4); opacity: 0.4; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; filter: brightness(0); }
}

.legendary-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffd700 0%, #ffa500 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.opening-item-rarity {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  position: relative;
  z-index: 10;
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  display: inline-block;
  filter: none !important;
  -webkit-filter: none !important;
}

.opening-item-rarity.common { background: var(--common); }
.opening-item-rarity.uncommon { background: var(--uncommon); }
.opening-item-rarity.rare { background: var(--rare); }
.opening-item-rarity.epic { background: var(--epic); }
.opening-item-rarity.legendary { background: var(--legendary); box-shadow: 0 0 20px rgba(246, 173, 85, 0.8); }

.click-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 5;
}

/* SUMMARY SCREEN */
.summary-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.summary-modal.active {
  display: flex;
}

.summary-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #667eea;
  border-radius: 20px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}

.summary-header {
  text-align: center;
  margin-bottom: 2rem;
}

.summary-title {
  font-size: 2rem;
  font-weight: 700;
  color: #667eea;
  margin: 0;
}

.summary-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  max-height: 400px;
  overflow-y: auto;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-item-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: rgba(255, 255, 255, 0.93);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.95);
}

.summary-item-rarity {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  text-align: center;
  color: white;
}

.summary-item-rarity.common { background: var(--common); }
.summary-item-rarity.uncommon { background: var(--uncommon); }
.summary-item-rarity.rare { background: var(--rare); }
.summary-item-rarity.epic { background: var(--epic); }
.summary-item-rarity.legendary { background: var(--legendary); box-shadow: 0 0 10px rgba(246, 173, 85, 0.6); }

.summary-close-btn {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.summary-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* PAYOUT MODAL */
.payout-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.payout-tab {
  padding: 0.6rem 1rem;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid #667eea;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.payout-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.payout-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.payout-table thead {
  background: rgba(102, 126, 234, 0.1);
}

.payout-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  color: #667eea;
  border-bottom: 2px solid #667eea;
}

.payout-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  color: #e2e8f0;
}

.rarity-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
}

.rarity-badge.common { background: var(--common); }
.rarity-badge.uncommon { background: var(--uncommon); }
.rarity-badge.rare { background: var(--rare); }
.rarity-badge.epic { background: var(--epic); }
.rarity-badge.legendary { background: var(--legendary); }

.chance-percentage {
  font-weight: 700;
  color: #667eea;
}

/* Responsive */
@media (max-width: 600px) {
  .gacha-main {
    padding: 0.5rem;
  }

  .gacha-title {
    font-size: 1.5rem;
  }

  .series-selector {
    gap: 0.25rem;
    margin-bottom: 1rem;
  }

  .series-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .opening-item-icon {
    width: 150px;
    height: 150px;
    font-size: 4rem;
  }

  .draw-buttons {
    gap: 0.5rem;
  }

  .draw-btn {
    padding: 0.75rem 1rem;
    min-width: 80px;
    font-size: 0.8rem;
  }

  .summary-content {
    padding: 1.5rem;
  }

  .summary-items {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 0.5rem;
  }

  .summary-item-icon {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }

  .payout-table td,
  .payout-table th {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

/* ===== PLAYER EQUIPMENT MODAL ===== */
.player-equipment-modal {
  max-width: 500px;
  max-height: 85vh;
  box-sizing: border-box;
}

.equipment-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  text-align: center;
  width: 100%;
}

.equipment-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--accent-primary);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.equipment-player-info {
  flex: none;
  width: 100%;
}

.equipment-player-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--text-primary);
}

.equipment-player-stats-quick {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.equipment-player-stats-quick span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.equipment-grid-section,
.equipment-stats-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* Equipment Grid - 4 Columns */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.equipment-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.8) 0%, rgba(30, 30, 46, 0.8) 100%);
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.equipment-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.equipment-slot:hover::before {
  left: 100%;
}

.equipment-slot:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
  border-color: var(--accent-primary);
}

.equipment-slot.common {
  border-color: var(--common);
}

.equipment-slot.uncommon {
  border-color: var(--uncommon);
}

.equipment-slot.rare {
  border-color: var(--rare);
}

.equipment-slot.epic {
  border-color: var(--epic);
}

.equipment-slot.legendary {
  border-color: var(--legendary);
}

.equipment-slot.mythic {
  border-color: var(--mythic);
}

.equipment-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
  font-size: 24px;
  opacity: 0.6;
  z-index: 2;
}

.equipment-slot-type {
  font-size: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}

.equipment-slot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  text-align: center;
}

.equipment-slot-icon {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}

.equipment-slot-icon img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 6px;
}

.equipment-slot-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 4px;
  line-height: 1.2;
  word-wrap: break-word;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detailed Stats Section */
.equipment-stats-details {
  background: linear-gradient(135deg, rgba(42, 42, 58, 0.6) 0%, rgba(30, 30, 46, 0.6) 100%);
  border-radius: 12px;
  border: 1px solid rgba(74, 74, 90, 0.5);
  padding: 16px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(74, 74, 90, 0.3);
}

.stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.stat-value {
  color: var(--accent-primary);
  font-size: 16px;
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 480px) {
  .player-equipment-modal {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    margin: 0 auto;
  }
  
  .equipment-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .equipment-modal-header {
    flex-direction: column;
    text-align: center;
  }
  
  .equipment-avatar {
    width: 50px;
    height: 50px;
  }
  
  .equipment-player-stats-quick {
    justify-content: center;
    font-size: 12px;
  }
}

/* Extra small devices (under 360px) */
@media (max-width: 360px) {
  .player-equipment-modal {
    max-width: 100%;
    width: calc(100vw - 16px);
    margin: 0 8px;
    max-height: 95vh;
  }
  
  .equipment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 12px 16px;
  }
  
  .equipment-player-stats-quick {
    flex-direction: column;
    gap: 4px;
  }
}

/* Ensure no horizontal scroll on any device */
@media (max-width: 768px) {
  .modal-content {
    width: calc(100vw - 16px);
    margin: 0 8px;
  }
  
  .player-equipment-modal {
    width: 100%;
    max-width: 100%;
  }
}


}