/* ===========================================
   OLYMPUS RISING - Screen Styles
   =========================================== */

/* ===========================================
   LOADING SCREEN
   =========================================== */
#loading-screen {
  justify-content: center;
  align-items: center;
  background: 
    linear-gradient(to bottom, rgba(13, 31, 51, 0.3) 0%, rgba(13, 31, 51, 0.6) 100%),
    url('../assets/loading_screen.png');
  background-size: cover;
  background-position: center;
  position: relative;
}

.loading-content {
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}

.olympus-logo {
  margin-bottom: var(--space-xl);
}

.logo-image {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(100, 200, 255, 0.4));
}

.logo-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-md);
  animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px var(--color-olympus-gold));
}

.olympus-logo h1 {
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: divineGlow 3s ease-in-out infinite;
}

.tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.loading-bar {
  width: 200px;
  height: 6px;
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) auto;
  overflow: hidden;
  border: 1px solid var(--color-olympus-gold-dark);
}

.loading-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-gold);
  border-radius: var(--radius-lg);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--color-olympus-gold);
}

.loading-text {
  font-family: var(--font-accent);
  font-size: 0.9rem;
  color: var(--color-olympus-gold-light);
  animation: pulse 2s ease-in-out infinite;
}

/* ===========================================
   AUTH SCREEN
   =========================================== */
#auth-screen {
  justify-content: flex-start;
  align-items: center;
  padding: var(--space-lg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

#auth-screen::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.auth-container {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, 
    rgba(30, 58, 95, 0.9) 0%, 
    rgba(13, 31, 51, 0.95) 100%
  );
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--color-olympus-gold-dark);
  box-shadow: var(--shadow-lg), var(--shadow-divine);
  animation: scaleIn 0.5s ease-out;
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.auth-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.auth-logo {
  max-width: 180px;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-md);
  filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.3));
}

.auth-header h2 {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.auth-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.auth-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--color-olympus-gold-dark);
  color: var(--color-marble-cream);
  font-family: var(--font-display);
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
}

.auth-tab:hover {
  background: rgba(212, 175, 55, 0.1);
}

.auth-tab.active {
  background: var(--gradient-gold);
  color: var(--color-night-black);
  border-color: var(--color-olympus-gold);
}

.auth-form {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-form.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

/* ===========================================
   CHARACTER CREATION SCREEN
   =========================================== */
#character-creation-screen {
  padding: var(--space-lg);
  padding-bottom: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

#character-creation-screen::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.creation-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  animation: fadeInDown 0.5s ease-out;
}

.creation-header h2 {
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}

.creation-header p {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-marble-cream);
  opacity: 0.8;
  font-size: 0.95rem;
}

.creation-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0.5;
  transition: var(--transition-normal);
}

.step.active {
  opacity: 1;
}

.step.completed {
  opacity: 0.8;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-olympus-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-marble-cream);
  transition: var(--transition-normal);
}

.step.active .step-number {
  background: var(--gradient-gold);
  color: var(--color-night-black);
  border-color: var(--color-olympus-gold);
  box-shadow: var(--shadow-glow);
}

.step.completed .step-number {
  background: var(--color-laurel-green);
  border-color: var(--color-laurel-green);
}

.step.completed .step-number::after {
  content: '✓';
}

.step-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-marble-cream);
}

.creation-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--space-lg);
}

.creation-step {
  display: none;
  animation: fadeIn 0.5s ease-out;
}

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

/* Step 1: Identity */
.character-preview-mini {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.preview-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-round);
  background: var(--color-aegean-blue);
  border: 3px solid var(--color-olympus-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: var(--shadow-divine);
}

.avatar-placeholder {
  font-size: 2.5rem;
  color: var(--color-olympus-gold);
}

.gender-select {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.gender-btn {
  flex: 1;
  min-width: 100px;
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-aegean-blue);
  border-radius: var(--radius-md);
  color: var(--color-marble-cream);
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gender-btn:hover {
  border-color: var(--color-olympus-gold-dark);
}

.gender-btn.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
  color: var(--color-olympus-gold);
}

/* Step 2: God Selection */
.step-intro {
  text-align: center;
  font-family: var(--font-accent);
  font-size: 1.1rem;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-lg);
}

.god-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
}

/* Responsive grid for different screen sizes */
@media (max-width: 600px) {
  .god-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.god-card {
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  background: var(--color-aegean-blue);
  border: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 4px;
  overflow: hidden;
}

.god-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--color-olympus-gold-dark);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.god-card.selected {
  border-color: var(--color-olympus-gold);
  background: rgba(212, 175, 55, 0.15);
  box-shadow: var(--shadow-glow), 0 0 20px rgba(212, 175, 55, 0.4);
  transform: scale(1.03);
}

.god-portrait {
  width: 100%;
  flex: 1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  background: linear-gradient(135deg, var(--color-midnight-purple), var(--color-aegean-blue));
  position: relative;
  min-height: 0;
}

.god-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: var(--transition-fast);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0; /* Ensure no rounding on the image itself */
}

.god-card:hover .god-portrait img {
  transform: scale(1.05);
}

.god-symbol-fallback {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.god-card .god-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
}

.god-card .god-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-olympus-gold);
  text-align: center;
  line-height: 1.2;
  padding: 2px 4px;
  flex-shrink: 0;
}

.god-card .god-title {
  display: none;
}

.god-details {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--color-olympus-gold-dark);
  min-height: 150px;
}

.god-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.detail-portrait {
  width: 80px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-olympus-gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.detail-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.detail-portrait .detail-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--color-midnight-purple), var(--color-aegean-blue));
}

.god-header-info h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-olympus-gold);
  margin: 0 0 4px 0;
}

.god-header-info .god-title {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  margin: 0 0 4px 0;
}

.god-header-info .god-domain {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.preview-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
}

.select-prompt {
  text-align: center;
  color: var(--color-marble-cream);
  opacity: 0.6;
  font-style: italic;
}

.god-info {
  animation: fadeIn 0.3s ease-out;
}

.god-info h4 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.god-info .god-domain {
  font-family: var(--font-accent);
  font-size: 0.9rem;
  color: var(--color-olympus-gold-light);
  margin-bottom: var(--space-md);
}

.god-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.stat-bonus {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.stat-bonus.positive {
  color: var(--color-laurel-green);
}

/* Step 3: Appearance */
.appearance-preview {
  width: 150px;
  height: 200px;
  margin: 0 auto var(--space-lg);
  background: var(--color-aegean-blue);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-olympus-gold-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-sm);
}

.preview-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.preview-portrait-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.preview-god-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.preview-god-symbol-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--color-midnight-purple), var(--color-aegean-blue));
}

.preview-placeholder {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-marble-cream);
  opacity: 0.5;
  font-size: 0.8rem;
  text-align: center;
}

.preview-customization {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.preview-swatch {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  border: 2px solid rgba(255,255,255,0.3);
}

.preview-info {
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  margin: 0;
  opacity: 0.8;
}

.appearance-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.option-group label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-olympus-gold);
}

.color-picker, .style-picker {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.color-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(255,255,255,0.5);
}

.color-swatch.selected {
  border-color: var(--color-olympus-gold);
  box-shadow: 0 0 10px var(--color-olympus-gold), 0 2px 4px rgba(0,0,0,0.3);
  transform: scale(1.1);
}

.style-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-aegean-blue);
  border: 1px solid var(--color-aegean-blue-dark);
  border-radius: var(--radius-sm);
  color: var(--color-marble-cream);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.style-btn:hover {
  border-color: var(--color-olympus-gold-dark);
  background: var(--color-aegean-blue-dark);
}

.style-btn.selected {
  border-color: var(--color-olympus-gold);
  background: rgba(212, 175, 55, 0.2);
  color: var(--color-olympus-gold);
}

.color-option {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.selected {
  border-color: var(--color-olympus-gold);
  box-shadow: 0 0 10px var(--color-olympus-gold);
}

.style-option {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue);
  border: 1px solid var(--color-aegean-blue);
  border-radius: var(--radius-sm);
  color: var(--color-marble-cream);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.style-option:hover {
  border-color: var(--color-olympus-gold-dark);
}

.style-option.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
  color: var(--color-olympus-gold);
}

/* Step 4: Realm */
.realm-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.realm-card {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-normal);
}

.realm-card:hover {
  border-color: var(--color-olympus-gold-dark);
}

.realm-card.selected {
  border-color: var(--color-olympus-gold);
  box-shadow: var(--shadow-glow);
}

.realm-image {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.realm-image.ancient-bg {
  background: linear-gradient(135deg, #8B7355 0%, #5C4033 100%);
}

.realm-image.modern-bg {
  background: linear-gradient(135deg, #2C3E50 0%, #1A252F 100%);
}

.realm-icon {
  font-size: 3rem;
}

.realm-card h3 {
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-size: 1.1rem;
}

.realm-card p {
  padding: 0 var(--space-md);
  font-size: 0.9rem;
  color: var(--color-marble-cream);
  opacity: 0.9;
}

.realm-features {
  list-style: none;
  padding: var(--space-md);
}

.realm-features li {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  padding: var(--space-xs) 0;
}

/* Creation Navigation */
.creation-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(transparent, var(--color-night-black));
  display: flex;
  gap: var(--space-md);
}

/* Name Input Wrapper */
.name-input-wrapper {
  display: flex;
  gap: var(--space-sm);
}

.name-input-wrapper input {
  flex: 1;
}

.name-input-wrapper .btn-small {
  padding: var(--space-sm) var(--space-md);
  font-size: 1.2rem;
  background: var(--color-aegean-blue);
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.name-input-wrapper .btn-small:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
}

/* Field success state */
.field-success {
  font-size: 0.75rem;
  color: var(--color-laurel-green);
  min-height: 1em;
  margin-top: 2px;
}

input.input-success {
  border-color: var(--color-laurel-green);
}

input.input-success:focus {
  box-shadow: 0 0 0 2px rgba(107, 142, 35, 0.2);
}

/* Enhanced God Details */
.god-detail-card {
  animation: fadeIn 0.3s ease-out;
}

.god-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.detail-symbol {
  font-size: 2.5rem;
}

.god-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.god-title {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  color: var(--color-olympus-gold);
  margin: 0;
}

.god-domain {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin: 0;
}

.god-blessing {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--color-olympus-gold);
}

.god-blessing p {
  margin: 0;
  color: var(--color-marble-cream);
  font-size: 0.9rem;
}

.god-element, .god-bonuses {
  margin-bottom: var(--space-md);
}

.god-element span, .god-bonuses span {
  font-size: 0.8rem;
  color: var(--color-olympus-gold-light);
}

.bonuses-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.stat-bonus {
  background: rgba(107, 142, 35, 0.2);
  color: var(--color-laurel-green);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Starting Stats Preview */
.starting-stats {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.starting-stats h4 {
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
  color: var(--color-olympus-gold);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: var(--space-xs);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xs);
}

.stat-name {
  color: var(--color-marble-cream);
  opacity: 0.8;
  text-transform: capitalize;
}

.stat-value {
  color: var(--color-olympus-gold);
  font-weight: 600;
}

.derived-stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-size: 0.85rem;
}

/* Starting Ability */
.starting-ability {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.starting-ability h4 {
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
  color: var(--color-olympus-gold);
}

.ability-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.ability-icon {
  font-size: 2rem;
  background: var(--color-aegean-blue-dark);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.ability-info strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.ability-info p {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.9;
  margin-bottom: var(--space-xs);
}

.ability-meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.75rem;
  color: var(--color-olympus-gold-light);
}

/* Step 5: Summary */
.summary-card {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-olympus-gold-dark);
  overflow: hidden;
}

.summary-section {
  padding: var(--space-lg);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.summary-section:last-child {
  border-bottom: none;
}

.summary-section h3 {
  font-size: 0.9rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.summary-identity {
  text-align: center;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
}

.summary-avatar {
  margin-bottom: var(--space-md);
}

.god-symbol.large {
  font-size: 4rem;
  display: block;
}

.summary-name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.summary-subtitle {
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin-bottom: var(--space-xs);
}

.summary-realm {
  color: var(--color-olympus-gold-light);
  font-size: 0.9rem;
}

.summary-god {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.summary-god .god-symbol {
  font-size: 2rem;
}

.summary-god strong {
  display: block;
}

.summary-god p {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin: 0;
}

.summary-blessing {
  background: rgba(0, 0, 0, 0.2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-olympus-gold);
  font-size: 0.9rem;
  color: var(--color-marble-cream);
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.summary-stat .stat-name {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.summary-stat .stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.summary-derived {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  font-size: 0.9rem;
}

.summary-ability {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.2);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
}

.summary-ability .ability-icon {
  font-size: 1.5rem;
}

.summary-ability strong {
  display: block;
  margin-bottom: var(--space-xs);
}

.summary-ability p {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.9;
  margin: 0;
}

.summary-appearance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.appearance-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-marble-cream);
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.summary-currencies {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  font-size: 1.1rem;
}

.summary-disclaimer {
  text-align: center;
  font-size: 0.8rem;
  color: #ffaa00;
  padding: var(--space-md);
  background: rgba(255, 170, 0, 0.1);
  margin: 0;
}

/* ===========================================
   MAIN GAME SCREEN
   =========================================== */
#game-screen {
  padding-top: 0;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

#game-screen.active {
  display: flex;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-md);
  background: linear-gradient(180deg, 
    rgba(13, 31, 51, 0.95) 0%, 
    rgba(13, 31, 51, 0.8) 80%,
    transparent 100%
  );
  position: relative;
  z-index: var(--z-header);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.player-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.player-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-round);
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-olympus-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.player-avatar .combat-portrait,
.combatant-avatar .combat-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.god-symbol {
  font-size: 1.5rem;
}

.player-details {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.player-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-marble-cream);
}

.level-badge {
  background: var(--gradient-gold);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-night-black);
  font-weight: 700;
}

.xp-bar {
  width: 140px;
  height: 8px;
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-olympus-gold-dark), var(--color-olympus-gold));
  transition: width var(--transition-normal);
}

.xp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--color-marble-cream);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 44px; /* Match button heights for consistent alignment */
}

.currency {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: none;
  height: 44px; /* Match button heights */
}

.currency-icon {
  font-size: 1rem;
}

.currency-amount {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-marble-cream);
  min-width: 40px;
}

.add-btn {
  width: 28px;
  height: 28px;
  min-width: 44px; /* Touch target */
  min-height: 44px;
  border-radius: var(--radius-round);
  background: var(--color-olympus-gold);
  border: none;
  color: var(--color-night-black);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.add-btn:active {
  transform: scale(0.9);
  background: var(--color-olympus-gold-light);
}

.settings-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.settings-btn .ui-icon {
  width: 32px;
  height: 32px;
}

.settings-btn:hover {
  opacity: 0.8;
}

.settings-btn:active {
  transform: scale(0.95);
  opacity: 0.7;
}

/* Music Toggle Button */
.music-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.music-btn:hover {
  opacity: 0.8;
}

.music-btn:active {
  transform: scale(0.95);
}

.music-btn.muted {
  opacity: 0.5;
}

.music-btn.muted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 24px;
  background: var(--color-danger);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Resource Bars */
.resource-bars {
  display: flex;
  gap: var(--space-md);
  padding: 0 var(--space-md) var(--space-sm);
}

.resource-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.resource-icon {
  font-size: 1rem;
}

.bar-container {
  flex: 1;
  height: 12px;
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.resource-bar.health .bar-fill {
  background: linear-gradient(90deg, #8B0000, #DC143C);
}

.resource-bar.mana .bar-fill {
  background: linear-gradient(90deg, #1E3A5F, #4169E1);
}

.bar-fill {
  height: 100%;
  transition: width var(--transition-normal);
}

.resource-text {
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  min-width: 50px;
  text-align: right;
}

/* Game Content */
.game-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-md);
  padding-bottom: 110px; /* Space for nav (64px) + chat bar collapsed (32px) + buffer */
  /* Smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Prevent content from exceeding viewport */
  max-height: calc(100vh - 140px); /* Account for header and nav */
}

/* When chat is expanded, need more space */
.game-content.chat-expanded {
  padding-bottom: 360px; /* nav + chat bar expanded (280px) */
}

/* Bottom Navigation */
.game-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px; /* Slightly shorter but with larger touch targets */
  background: linear-gradient(180deg, 
    rgba(13, 31, 51, 0.98) 0%, 
    rgba(10, 10, 15, 0.99) 100%
  );
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 0;
  border-top: 1px solid var(--color-olympus-gold-dark);
  z-index: var(--z-nav);
  /* Safe area for iPhone notch/home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  min-height: 48px; /* Minimum touch target */
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.2);
}

/* Active state feedback for touch */
.nav-btn:active {
  background: rgba(212, 175, 55, 0.15);
}

.nav-icon {
  font-size: 1.3rem;
  transition: var(--transition-fast);
}

.nav-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: var(--transition-fast);
}

.nav-label {
  font-family: var(--font-display);
  font-size: 0.7rem; /* Increased from 0.65rem */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-marble-cream);
  opacity: 0.8;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.nav-btn:hover .nav-label,
.nav-btn.active .nav-label {
  opacity: 1;
  color: var(--color-olympus-gold);
}

.nav-btn.active .nav-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px var(--color-olympus-gold));
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 20%;
  width: 18px;
  height: 18px;
  background: var(--color-blood-red);
  border-radius: var(--radius-round);
  font-size: 0.7rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

/* ===========================================
   COMBAT SCREEN
   =========================================== */
#combat-screen {
  padding: var(--space-md);
}

.combat-arena {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, 
    rgba(30, 58, 95, 0.9) 0%, 
    rgba(13, 31, 51, 0.95) 100%
  );
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-olympus-gold-dark);
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.combat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--color-olympus-gold-dark);
}

.combat-header h3 {
  font-size: 1.1rem;
}

.turn-counter {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-marble-cream);
}

.combat-field {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--space-lg);
  min-height: 200px;
}

.combatant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.combatant-sprite {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-olympus-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.player-sprite {
  border-color: var(--color-olympus-gold);
  box-shadow: var(--shadow-glow);
}

.combatant-info {
  text-align: center;
  width: 100px;
}

.combatant-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-xs);
}

.combat-health-bar, .combat-mana-bar {
  height: 8px;
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 2px;
}

.combat-health-bar .bar-fill {
  background: linear-gradient(90deg, #8B0000, #DC143C);
}

.combat-mana-bar .bar-fill {
  background: linear-gradient(90deg, #1E3A5F, #4169E1);
}

.vs-indicator {
  font-size: 2rem;
  animation: pulse 1.5s ease-in-out infinite;
}

.combat-log {
  height: 80px;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.log-entry {
  font-size: 0.8rem;
  color: var(--color-marble-cream);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  animation: fadeInUp 0.3s ease-out;
}

.log-entry.damage {
  color: #FF6B6B;
}

.log-entry.heal {
  color: #4ADE80;
}

.log-entry.buff {
  color: var(--color-olympus-gold);
}

.log-entry.critical {
  color: #FFD700;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMBAT ENGINE - COMBO & PROC LOG STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.log-entry.combo {
  color: #ff6b00;
  font-weight: 700;
  font-size: 0.9rem;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
  animation: comboPulse 0.5s ease-out;
}

.log-entry.combo-damage {
  color: #ff8c42;
  padding-left: 16px;
}

.log-entry.proc {
  color: #9b59b6;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(155, 89, 182, 0.4);
}

.log-entry.proc-damage {
  color: #b97bcd;
  padding-left: 16px;
}

.log-entry.proc-heal {
  color: #2ecc71;
  padding-left: 16px;
}

.log-entry.proc-shield {
  color: #3498db;
  padding-left: 16px;
}

.log-entry.effect-stack {
  color: #e67e22;
  font-size: 0.75rem;
}

.log-entry.effect-refresh {
  color: #f1c40f;
  font-size: 0.75rem;
}

.log-entry.effect-expire {
  color: #7f8c8d;
  font-size: 0.75rem;
  font-style: italic;
}

.log-entry.effect-consume {
  color: #e74c3c;
  font-size: 0.75rem;
}

.log-entry.cooldown-reset {
  color: #3498db;
}

.log-entry.death {
  color: #c0392b;
  font-weight: 600;
}

.log-entry.dot {
  color: #e74c3c;
}

.log-entry.cc {
  color: #9b59b6;
}

.log-entry.miss {
  color: #95a5a6;
  font-style: italic;
}

.log-entry.immune {
  color: #f1c40f;
}

.log-entry.lifesteal {
  color: #8e44ad;
}

.log-entry.reflect {
  color: #1abc9c;
}

.log-entry.boss-phase {
  color: #e74c3c;
  font-weight: 700;
  font-size: 0.9rem;
  text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

/* Combo flash effect */
.combo-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  animation: comboFlash 0.8s ease-out forwards;
  pointer-events: none;
}

.combo-text {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: #ff6b00;
  text-shadow: 
    0 0 20px rgba(255, 107, 0, 0.8),
    0 0 40px rgba(255, 107, 0, 0.5),
    2px 2px 0 #000;
  animation: comboPulse 0.5s ease-out;
}

@keyframes comboFlash {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes comboPulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.8), 0 0 30px rgba(255, 107, 0, 0.5);
  }
}

/* Proc indicator */
.proc-indicator {
  position: absolute;
  top: 20%;
  right: 20%;
  font-size: 2rem;
  animation: procPop 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes procPop {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1) translateY(-20px);
  }
}

/* Shield popup */
.shield-popup {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: #3498db;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
  animation: shieldPop 1s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes shieldPop {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }
}

.combat-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
}

.ability-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ability-btn:hover:not(:disabled) {
  border-color: var(--color-olympus-gold);
  transform: translateY(-2px);
}

.ability-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ability-btn .ability-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.ability-btn .ability-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-marble-cream);
}

.ability-btn .ability-cost {
  font-size: 0.65rem;
  color: #4169E1;
}

/* ===========================================
   STORY DIALOG
   =========================================== */
#story-dialog {
  padding: var(--space-lg);
  align-items: flex-end;
}

.dialog-box {
  background: linear-gradient(180deg, 
    rgba(30, 58, 95, 0.95) 0%, 
    rgba(13, 31, 51, 0.98) 100%
  );
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 2px solid var(--color-olympus-gold-dark);
  border-bottom: none;
  padding: var(--space-lg);
  max-height: 60vh;
  overflow-y: auto;
  animation: slideInUp 0.3s ease-out;
}

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

.dialog-speaker {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-olympus-gold-dark);
}

.dialog-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-lg);
}

.dialog-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.choice-btn {
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  color: var(--color-marble-cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.choice-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--color-olympus-gold);
  color: var(--color-olympus-gold);
  transform: translateX(5px);
}

/* ===========================================
   TOAST NOTIFICATIONS
   =========================================== */
#toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  background: linear-gradient(135deg, 
    rgba(30, 58, 95, 0.95) 0%, 
    rgba(13, 31, 51, 0.98) 100%
  );
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  animation: fadeInDown 0.3s ease-out;
  pointer-events: auto;
}

.toast.success {
  border-color: var(--color-laurel-green);
}

.toast.error {
  border-color: var(--color-blood-red);
}

.toast.info {
  border-color: var(--color-olympus-gold);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.toast-icon {
  font-size: 1.2rem;
}

.toast-message {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-marble-cream);
}

/* ===========================================
   MODAL
   =========================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-shadow);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
  backdrop-filter: blur(4px);
}

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

.modal-content {
  background: linear-gradient(180deg, 
    rgba(30, 58, 95, 0.95) 0%, 
    rgba(13, 31, 51, 0.98) 100%
  );
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-lg);
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: scaleIn 0.3s ease-out;
}

.modal-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--color-aegean-blue);
  border: 1px solid var(--color-olympus-gold-dark);
  color: var(--color-marble-cream);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
}

.modal-body {
  padding: var(--space-xl);
}

/* ===========================================
   HERO VIEW
   =========================================== */
.hero-view {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: 100px;
}

/* Hero Header Card */
.hero-header-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(13, 31, 51, 0.9) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-olympus-gold-dark);
}

.hero-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-round);
  background: var(--color-aegean-blue);
  border: 3px solid var(--color-olympus-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-divine);
  overflow: hidden;
}

.hero-avatar .hero-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-avatar .god-symbol.large {
  font-size: 2.5rem;
}

.hero-avatar .level-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  background: var(--gradient-gold);
  color: var(--color-night-black);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-night-black);
}

.hero-info {
  flex: 1;
}

.hero-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 var(--space-xs);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title {
  font-size: 0.9rem;
  color: var(--color-olympus-gold-light);
  margin: 0 0 var(--space-xs);
}

.hero-realm {
  font-size: 0.8rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin: 0;
}

.power-rating {
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.power-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-olympus-gold-light);
  margin-bottom: var(--space-xs);
}

.power-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-olympus-gold);
}

/* XP Progress Card */
.xp-progress-card {
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.xp-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}

.xp-bar.large {
  height: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.xp-bar.large .xp-fill {
  height: 100%;
  background: var(--gradient-gold);
  transition: width 0.5s ease;
}

.next-level-hint {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.6;
  margin: var(--space-sm) 0 0;
  text-align: center;
}

/* Stat Points Banner */
.stat-points-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold);
  animation: pulse 2s infinite;
}

.points-icon {
  font-size: 1.5rem;
}

.stat-points-banner span {
  flex: 1;
  font-size: 0.9rem;
}

.stat-points-banner .btn-small {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.8rem;
}

/* Combat Stats Card */
.combat-stats-card,
.base-stats-card,
.currencies-card,
.pvp-stats-card {
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.combat-stats-card h3,
.base-stats-card h3,
.currencies-card h3,
.pvp-stats-card h3 {
  font-size: 0.9rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.combat-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.combat-stat {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.combat-stat .stat-label {
  display: block;
  font-size: 0.7rem;
  margin-bottom: var(--space-xs);
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.combat-stat .stat-value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-olympus-gold);
}

/* Detailed Stats */
.stats-detailed {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stat-row-detailed {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.stat-header .stat-icon {
  font-size: 1.2rem;
}

.stat-header .stat-name {
  flex: 1;
  font-weight: 600;
  text-transform: capitalize;
}

.stat-header .stat-total {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-olympus-gold);
}

.stat-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-left: 28px;
}

.breakdown-item {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.breakdown-item.god {
  color: var(--color-olympus-gold);
  opacity: 1;
}

.breakdown-item.level {
  color: #87ceeb;
  opacity: 1;
}

.breakdown-item.allocated {
  color: var(--color-laurel-green);
  opacity: 1;
}

.breakdown-item.equip {
  color: #ff69b4;
  opacity: 1;
}

/* Currencies Grid */
.currencies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.currency-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.currency-item .currency-icon {
  font-size: 1.2rem;
}

.currency-item .currency-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.currency-item .currency-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-olympus-gold);
}

/* PvP Stats Grid */
.pvp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.pvp-stat {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.pvp-stat .pvp-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}

.pvp-stat .pvp-value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-marble-cream);
}

.pvp-stat.wins .pvp-value {
  color: var(--color-laurel-green);
}

.pvp-stat.losses .pvp-value {
  color: #ff6b6b;
}

/* ===========================================
   STAT ALLOCATION MODAL
   =========================================== */
.allocation-modal {
  padding: var(--space-lg);
}

.allocation-modal h2 {
  text-align: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  color: var(--color-olympus-gold);
}

.points-remaining {
  text-align: center;
  font-size: 1rem;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm);
  background: rgba(212, 175, 55, 0.1);
  border-radius: var(--radius-sm);
}

.points-remaining strong {
  color: var(--color-olympus-gold);
  font-size: 1.2rem;
}

.allocation-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.allocation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.allocation-stat {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.allocation-stat .stat-icon {
  font-size: 1.3rem;
}

.allocation-stat .stat-name {
  font-weight: 600;
}

.allocation-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.allocation-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  border: 1px solid var(--color-olympus-gold-dark);
  background: var(--color-aegean-blue);
  color: var(--color-marble-cream);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition-fast);
}

.allocation-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
}

.allocation-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.allocation-btn.plus:hover:not(:disabled) {
  background: rgba(107, 142, 35, 0.3);
  border-color: var(--color-laurel-green);
}

.allocation-value {
  min-width: 60px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.pending-value {
  color: var(--color-laurel-green);
  font-size: 0.9rem;
}

.allocation-info {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.allocation-info p {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin-bottom: var(--space-xs);
}

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

/* ===========================================
   LEVEL UP MODAL
   =========================================== */
.level-up-modal {
  padding: var(--space-xl);
  text-align: center;
  overflow: hidden;
}

.level-up-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
  animation: pulse 2s infinite;
  pointer-events: none;
}

.level-up-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: var(--space-lg);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bounce 0.5s ease;
}

.new-level {
  margin-bottom: var(--space-xl);
}

.level-number {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: var(--radius-round);
  background: var(--gradient-gold);
  color: var(--color-night-black);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: bold;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  animation: scaleIn 0.5s ease;
}

.level-up-rewards h3 {
  font-size: 1rem;
  margin-bottom: var(--space-md);
  color: var(--color-marble-cream);
}

.reward-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.reward-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(107, 142, 35, 0.2);
  border-radius: var(--radius-sm);
  color: var(--color-laurel-green);
  font-size: 0.95rem;
  animation: slideInLeft 0.3s ease backwards;
}

.reward-item:nth-child(1) { animation-delay: 0.1s; }
.reward-item:nth-child(2) { animation-delay: 0.2s; }
.reward-item:nth-child(3) { animation-delay: 0.3s; }
.reward-item:nth-child(4) { animation-delay: 0.4s; }

.reward-icon {
  font-size: 1.2rem;
}

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

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

/* ===========================================
   SKILLS VIEW
   =========================================== */
.skills-view {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: 100px;
}

.skills-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.skills-header h2 {
  font-size: 1.2rem;
  margin: 0;
}

.skill-points-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(212, 175, 55, 0.1);
  border-radius: var(--radius-sm);
}

.skill-points-display .points-icon {
  font-size: 1.2rem;
}

.skill-points-display strong {
  color: var(--color-olympus-gold);
  font-size: 1.1rem;
}

/* Equipped Abilities Bar */
.equipped-abilities-bar {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.equipped-abilities-bar h3 {
  font-size: 0.85rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ability-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.ability-slot {
  position: relative;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-olympus-gold-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}

.ability-slot:hover {
  border-color: var(--color-olympus-gold);
  background: rgba(212, 175, 55, 0.1);
}

.slot-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  text-align: center;
}

.slot-content.filled {
  background: rgba(212, 175, 55, 0.15);
  border-radius: var(--radius-sm);
}

.empty-slot-text {
  font-size: 1.5rem;
  color: var(--color-olympus-gold-dark);
  opacity: 0.5;
}

.slot-ability-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.slot-ability-name {
  font-size: 0.65rem;
  color: var(--color-marble-cream);
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
}

.slot-number {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: var(--color-night-black);
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-round);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-marble-cream);
}

.unequip-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: rgba(255, 100, 100, 0.8);
  border: none;
  color: white;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition-fast);
}

.ability-slot:hover .unequip-btn {
  opacity: 1;
}

/* Skill Tree Container */
.skill-tree-container {
  flex: 1;
  overflow-x: auto;
}

.skill-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: fit-content;
}

/* Skill Tiers with Visual Hierarchy */
.skill-tier {
  background: linear-gradient(135deg, var(--color-aegean-blue), rgba(0, 30, 60, 0.9));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 2px solid var(--color-olympus-gold-dark);
  position: relative;
  overflow: visible;
}

.skill-tier[data-tier="1"] {
  border-color: #60A5FA;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(0, 30, 60, 0.9));
}

.skill-tier[data-tier="2"] {
  border-color: #34D399;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(0, 30, 60, 0.9));
}

.skill-tier[data-tier="3"] {
  border-color: #A78BFA;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(0, 30, 60, 0.9));
}

.skill-tier[data-tier="4"] {
  border-color: var(--color-olympus-gold);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(0, 30, 60, 0.9));
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Tier Connection Lines */
.skill-tier::after {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 28px;
  background: linear-gradient(to bottom, var(--color-olympus-gold-dark), transparent);
}

.skill-tier:last-child::after {
  display: none;
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.tier-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-olympus-gold);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.skill-tier[data-tier="1"] .tier-label { color: #60A5FA; }
.skill-tier[data-tier="2"] .tier-label { color: #34D399; }
.skill-tier[data-tier="3"] .tier-label { color: #A78BFA; }
.skill-tier[data-tier="4"] .tier-label { color: var(--color-olympus-gold); }

.tier-badge {
  font-size: 0.75rem;
  padding: 4px 12px;
  background: rgba(212, 175, 55, 0.2);
  border-radius: var(--radius-pill);
  color: var(--color-olympus-gold-light);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.skill-tier[data-tier="1"] .tier-badge { background: rgba(96, 165, 250, 0.2); color: #93C5FD; }
.skill-tier[data-tier="2"] .tier-badge { background: rgba(52, 211, 153, 0.2); color: #6EE7B7; }
.skill-tier[data-tier="3"] .tier-badge { background: rgba(167, 139, 250, 0.2); color: #C4B5FD; }
.skill-tier[data-tier="4"] .tier-badge { background: rgba(212, 175, 55, 0.3); }

.tier-abilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
}

/* Ability Cards in Skill Tree - Enhanced */
.skill-tree .ability-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 130px;
  backdrop-filter: blur(5px);
}

.skill-tree .ability-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}

.skill-tree .ability-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--color-olympus-gold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.3);
}

.skill-tree .ability-card.unlocked {
  background: linear-gradient(135deg, rgba(107, 142, 35, 0.25), rgba(0, 0, 0, 0.4));
  border-color: var(--color-laurel-green);
}

.skill-tree .ability-card.unlocked::after {
  content: '✓';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  background: var(--color-laurel-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(107, 142, 35, 0.5);
}

.skill-tree .ability-card.available {
  border-color: var(--color-olympus-gold);
  animation: ability-pulse 2s infinite;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(0, 0, 0, 0.4));
}

@keyframes ability-pulse {
  0%, 100% { 
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
  }
  50% { 
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3);
  }
}

.skill-tree .ability-card.locked {
  opacity: 0.5;
  filter: grayscale(30%);
}

.skill-tree .ability-card.locked:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.skill-tree .ability-card.equipped {
  border-color: #F59E0B;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5), inset 0 0 20px rgba(245, 158, 11, 0.1);
}

.skill-tree .ability-card.equipped::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
}

.ability-icon-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
}

.ability-element {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.ability-type-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.9rem;
  background: var(--color-night-black);
  border-radius: var(--radius-round);
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.skill-tree .ability-info {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.skill-tree .ability-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-marble-cream);
  line-height: 1.2;
}

.skill-tree .ability-meta {
  font-size: 0.7rem;
  color: var(--color-olympus-gold-light);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  opacity: 0.8;
}

/* Level badge on ability nodes - removed duplicate styling */
.ability-node .level-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: linear-gradient(135deg, var(--color-laurel-green), #4ade80);
  color: white;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(107, 142, 35, 0.5);
}

.unlock-badge {
  position: absolute;
  top: -6px;
  right: 5px;
  width: 20px;
  height: 20px;
  background: var(--color-olympus-gold);
  color: var(--color-night-black);
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-reason {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  font-size: 0.6rem;
  color: #ff9999;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 4px;
  border-radius: var(--radius-xs);
}

/* ===========================================
   ABILITY DETAIL MODAL
   =========================================== */
.ability-detail-modal {
  padding: var(--space-lg);
}

.ability-detail-header {
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 3px solid var(--color-olympus-gold);
}

.ability-detail-icon {
  width: 70px;
  height: 70px;
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.element-icon {
  font-size: 2.5rem;
}

.ability-detail-title {
  flex: 1;
}

.ability-detail-title h2 {
  font-size: 1.3rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-olympus-gold);
}

.ability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.type-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-marble-cream);
}

.type-badge.active {
  background: rgba(255, 100, 100, 0.2);
  color: #ff9999;
}

.type-badge.passive {
  background: rgba(100, 200, 100, 0.2);
  color: #99ff99;
}

.type-badge.ultimate {
  background: rgba(200, 100, 255, 0.2);
  color: #dd99ff;
}

.element-badge {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, 0.2);
  color: var(--color-olympus-gold-light);
  text-transform: capitalize;
}

.ability-description {
  font-size: 0.95rem;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}

.ability-level-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(107, 142, 35, 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.current-level {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.current-level span {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
}

.current-level strong {
  font-size: 1.5rem;
  color: var(--color-olympus-gold);
}

.max-level {
  opacity: 0.5;
}

.max-level-badge {
  padding: var(--space-xs) var(--space-sm);
  background: var(--gradient-gold);
  color: var(--color-night-black);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: bold;
}

.ability-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.stat-box {
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  text-align: center;
}

.stat-box .stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-bottom: var(--space-xs);
}

.stat-box .stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-olympus-gold);
}

.ability-effects,
.ability-scaling,
.ability-prereqs {
  margin-bottom: var(--space-md);
}

.ability-effects h4,
.ability-scaling h4,
.ability-prereqs h4 {
  font-size: 0.8rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
}

.ability-effects ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ability-effects li {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-marble-cream);
}

.scaling-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.scaling-item {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(100, 200, 255, 0.1);
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  color: #99ddff;
}

.prereqs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.prereq {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
}

.prereq.met {
  background: rgba(107, 142, 35, 0.2);
  color: var(--color-laurel-green);
}

.prereq.unmet {
  background: rgba(255, 100, 100, 0.2);
  color: #ff9999;
}

.ability-detail-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.ability-detail-actions .btn {
  flex: 1;
}

.passive-note {
  flex: 1;
  text-align: center;
  padding: var(--space-md);
  background: rgba(107, 142, 35, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-laurel-green);
  font-size: 0.85rem;
}

/* ===========================================
   EQUIP ABILITY MODAL
   =========================================== */
.equip-ability-modal {
  padding: var(--space-lg);
}

.equip-ability-modal h2 {
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-olympus-gold);
}

.equip-ability-modal > p {
  text-align: center;
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin-bottom: var(--space-lg);
}

.slot-select-label {
  font-size: 0.85rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-sm);
}

.slot-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.slot-select-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.slot-select-btn:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--color-olympus-gold);
}

.slot-select-btn.current {
  background: rgba(107, 142, 35, 0.2);
  border-color: var(--color-laurel-green);
}

.slot-num {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.slot-current {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.equip-abilities-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--space-lg);
}

.equip-ability-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.equip-ability-option:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--color-olympus-gold);
}

.equip-ability-option.already-equipped {
  opacity: 0.6;
}

.option-icon {
  font-size: 1.5rem;
}

.option-info {
  flex: 1;
}

.option-name {
  display: block;
  font-weight: 600;
  color: var(--color-marble-cream);
}

.option-meta {
  font-size: 0.75rem;
  color: var(--color-olympus-gold-light);
}

.equipped-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: var(--color-laurel-green);
  color: white;
  border-radius: var(--radius-xs);
}

/* ===========================================
   ENEMY BROWSER MODAL
   =========================================== */
.enemy-browser-modal {
  padding: var(--space-lg);
}

.enemy-browser-modal h2 {
  text-align: center;
  margin-bottom: var(--space-sm);
  color: var(--color-olympus-gold);
}

.browser-subtitle {
  text-align: center;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-bottom: var(--space-lg);
}

.enemy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: var(--space-lg);
}

.enemy-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.enemy-option:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--color-olympus-gold);
  transform: translateX(5px);
}

.enemy-option.easy {
  border-left: 4px solid var(--color-laurel-green);
}

.enemy-option.normal {
  border-left: 4px solid var(--color-olympus-gold);
}

.enemy-option.hard {
  border-left: 4px solid #ff6b6b;
}

.enemy-icon-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.enemy-type-icon {
  font-size: 1.8rem;
}

.boss-crown {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1rem;
}

.enemy-details {
  flex: 1;
}

.enemy-option .enemy-name {
  display: block;
  font-weight: 600;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-xs);
}

.enemy-stats {
  font-size: 0.75rem;
  color: var(--color-olympus-gold-light);
}

.enemy-rewards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.75rem;
}

.xp-reward {
  color: #87ceeb;
}

.gold-reward {
  color: var(--color-olympus-gold);
}

.difficulty-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  font-weight: bold;
}

.difficulty-badge.easy {
  background: rgba(107, 142, 35, 0.3);
  color: var(--color-laurel-green);
}

.difficulty-badge.normal {
  background: rgba(212, 175, 55, 0.3);
  color: var(--color-olympus-gold);
}

.difficulty-badge.hard {
  background: rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
}

/* ===========================================
   COMBAT IMPROVEMENTS
   =========================================== */

/* Enemy targeting */
.enemy-combatant.targeted {
  transform: scale(1.05);
}

.enemy-combatant.targeted .enemy-avatar {
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  border: 2px solid #ff6b6b;
}

.enemy-combatant.dead {
  opacity: 0.3;
  pointer-events: none;
}

.enemy-combatant.boss .enemy-avatar {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Enemy info improvements */
.enemy-level {
  display: block;
  font-size: 0.7rem;
  color: var(--color-olympus-gold-light);
  margin-bottom: var(--space-xs);
}

.enemy-combatant .hp-text {
  display: block;
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  margin-top: 2px;
}

/* Status badges on enemies */
.status-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.9rem;
  animation: bounce 0.5s infinite;
}

.element-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 0.8rem;
}

/* Shield indicator */
.shield-indicator {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(100, 200, 255, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  color: #87ceeb;
}

/* Critical health bar */
.combat-health-bar .bar-fill.critical {
  background: linear-gradient(90deg, #8B0000, #ff0000);
  animation: pulse 0.5s infinite;
}

/* Combat buttons improvements */
.combat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  min-height: 70px;
  background: var(--color-aegean-blue);
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.combat-btn:hover:not(.disabled) {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--color-olympus-gold);
  transform: translateY(-2px);
}

.combat-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.combat-btn.on-cooldown {
  background: rgba(100, 100, 100, 0.3);
}

.combat-btn.no-mana {
  background: rgba(50, 50, 100, 0.3);
}

.combat-btn .btn-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.combat-btn .btn-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-marble-cream);
}

.combat-btn .btn-cost {
  font-size: 0.65rem;
  color: var(--color-olympus-gold-light);
}

.combat-btn.defend-btn {
  border-color: #4682B4;
}

.combat-btn.flee-btn {
  border-color: #666;
}

/* Damage numbers */
.damage-number {
  position: absolute;
  top: 20%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: damageFloat 1s ease-out forwards;
  z-index: 100;
}

.damage-number.critical {
  font-size: 2rem;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.damage-number.heal {
  color: #4ADE80;
}

@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* Shake animation */
.shake {
  animation: shakeAnim 0.3s ease-in-out;
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Combat log improvements */
.log-entry.player-damage {
  color: #87ceeb;
}

.log-entry.enemy-damage {
  color: #ff9999;
}

.log-entry.victory {
  color: var(--color-olympus-gold);
  font-weight: bold;
  font-size: 1rem;
}

.log-entry.defeat {
  color: #ff6b6b;
  font-weight: bold;
}

.log-entry.dodge {
  color: #87ceeb;
  font-style: italic;
}

.log-entry.warning {
  color: #ffaa00;
}

.log-entry.effect {
  color: #c77dff;
}

.log-entry.system {
  color: var(--color-marble-cream);
  opacity: 0.8;
}

/* Enhanced combat log types */
.log-entry.dot {
  color: #ff7b00;
}

.log-entry.cc {
  color: #9b59b6;
}

.log-entry.super-effective {
  color: #27ae60;
  font-weight: bold;
}

.log-entry.not-effective {
  color: #7f8c8d;
  font-style: italic;
}

.log-entry.miss {
  color: #95a5a6;
  font-style: italic;
}

.log-entry.immune {
  color: #f1c40f;
}

.log-entry.lifesteal {
  color: #8e44ad;
}

.log-entry.reflect {
  color: #3498db;
}

.log-entry.boss-phase {
  color: #e74c3c;
  font-weight: bold;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.log-entry.debuff {
  color: #e67e22;
}

.log-entry.resist {
  color: #1abc9c;
}

.log-entry.death {
  color: #c0392b;
  font-weight: bold;
}

.log-entry.info {
  color: #3498db;
  opacity: 0.9;
}

/* Status effects display */
.status-effects {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
  max-width: 80px;
}

.status-effects.player-effects {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.status-icon {
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 2px 4px;
  cursor: help;
  animation: pulse 2s infinite;
}

.status-icon:hover {
  transform: scale(1.2);
  z-index: 10;
}

/* Boss phase indicator */
.boss-phase {
  display: inline-block;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Element badge on enemies */
.element-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================
   COMBAT RESULT MODALS
   =========================================== */
.combat-result-modal {
  padding: var(--space-xl);
  text-align: center;
}

.result-banner {
  margin-bottom: var(--space-xl);
}

.result-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-md);
  animation: bounce 0.5s ease;
}

.combat-result-modal h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0;
}

.combat-result-modal.victory h2 {
  color: var(--color-olympus-gold);
}

.combat-result-modal.defeat h2 {
  color: #ff6b6b;
}

.rewards-section {
  margin-bottom: var(--space-xl);
}

.rewards-section h3 {
  font-size: 1rem;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-md);
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.combat-result-modal .reward-item {
  padding: var(--space-md);
  background: rgba(107, 142, 35, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.combat-result-modal .reward-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.combat-result-modal .reward-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-olympus-gold);
}

.combat-result-modal .reward-label {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.level-up-section {
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(107, 142, 35, 0.2) 100%);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  animation: pulse 2s infinite;
}

.level-up-section h3 {
  margin: 0 0 var(--space-sm);
  color: var(--color-olympus-gold);
}

.level-up-section p {
  margin: 0;
  font-size: 1.1rem;
}

.defeat-message {
  font-size: 1.1rem;
  color: var(--color-marble-cream);
  margin-bottom: var(--space-lg);
}

.defeat-info {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.defeat-info p {
  margin: var(--space-xs) 0;
  font-size: 0.9rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.btn-glow {
  animation: btnGlow 2s infinite;
}

@keyframes btnGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
  }
}

/* HP Text in combat */
.player-side .hp-text,
.enemy-side .hp-text {
  font-size: 0.7rem;
  color: var(--color-marble-cream);
  margin-top: var(--space-xs);
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INVENTORY & EQUIPMENT SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */

.inventory-view {
  padding: var(--space-md);
}

.inventory-header h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-olympus-gold);
  margin: 0 0 var(--space-md);
}

/* Equipment Section */
.equipment-section {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-olympus-gold-dark);
}

.equipment-section h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-marble-cream);
  margin: 0 0 var(--space-md);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (max-width: 500px) {
  .equipment-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.equipment-slot {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-aegean-blue-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  position: relative;
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(0, 0, 0, 0.2);
}

.equipment-slot.empty {
  opacity: 0.6;
}

.equipment-slot.empty:hover {
  opacity: 0.8;
  border-color: var(--color-olympus-gold-dark);
}

.equipment-slot.filled {
  border-style: solid;
  border-width: 2px;
}

.equipment-slot.filled:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.slot-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.slot-name {
  font-size: 0.6rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  text-transform: uppercase;
}

.slot-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 4px;
}

.slot-item .item-icon {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

.slot-item .item-name {
  font-size: 0.55rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-item .item-level {
  font-size: 0.5rem;
  opacity: 0.7;
}

.unequip-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-danger);
  color: white;
  border: none;
  font-size: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-fast);
}

.equipment-slot:hover .unequip-btn {
  opacity: 1;
}

.unequip-btn:hover {
  transform: scale(1.1);
}

/* Equipment Stats */
.equipment-stats {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-aegean-blue-dark);
}

.no-stats {
  text-align: center;
  color: var(--color-marble-cream);
  opacity: 0.5;
  font-size: 0.85rem;
  margin: 0;
}

.stats-from-gear h4 {
  font-size: 0.85rem;
  color: var(--color-olympus-gold);
  margin: 0 0 var(--space-sm);
}

.gear-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.gear-stat {
  font-size: 0.8rem;
  color: var(--color-marble-cream);
}

.gear-stat strong {
  color: var(--color-laurel-green);
}

.gear-stat.secondary strong {
  color: var(--color-olympus-gold-light);
}

/* Inventory Section */
.inventory-section {
  background: var(--color-aegean-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.inventory-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.inventory-header-row h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-marble-cream);
  margin: 0;
}

.inventory-header-row h3 span {
  font-size: 0.8rem;
  color: var(--color-olympus-gold);
  opacity: 0.8;
}

.inventory-actions {
  display: flex;
  gap: var(--space-xs);
}

.inventory-actions select {
  background: var(--color-aegean-blue-dark);
  color: var(--color-marble-cream);
  border: 1px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  cursor: pointer;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-xs);
}

@media (max-width: 500px) {
  .inventory-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.inventory-item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(0, 0, 0, 0.2);
}

.inventory-item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.item-content {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  position: relative;
}

.item-content .item-icon {
  font-size: 1.5rem;
}

.item-rarity-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.inventory-item .item-name {
  font-size: 0.5rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.inventory-item .item-level {
  font-size: 0.45rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.empty-inventory {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-marble-cream);
  opacity: 0.5;
  padding: var(--space-xl);
}

/* Item Modal */
.item-modal {
  max-width: 350px;
}

.item-modal .modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid;
}

.item-modal .item-icon.large {
  font-size: 2.5rem;
}

.item-modal .modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.item-modal .item-rarity {
  font-size: 0.8rem;
  text-transform: capitalize;
}

.item-modal .item-description {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
  font-style: italic;
  margin-bottom: var(--space-md);
}

.item-modal .item-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 0.8rem;
}

.item-modal .item-requirements .met {
  color: var(--color-laurel-green);
}

.item-modal .item-requirements .unmet {
  color: var(--color-danger);
}

.item-modal .god-affinity {
  color: var(--color-olympus-gold);
}

.item-modal .item-stats {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}

.item-modal .stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 4px 0;
}

.item-modal .stat-row span:first-child {
  text-transform: capitalize;
  color: var(--color-marble-cream);
}

.item-modal .stat-row .positive {
  color: var(--color-laurel-green);
}

.item-modal .stat-row.secondary span:first-child {
  color: var(--color-olympus-gold-light);
}

.item-modal .item-value {
  font-size: 0.8rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
}

.item-modal .modal-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.item-modal .btn-danger {
  background: var(--color-danger);
}

.item-modal .btn-danger:hover {
  background: #c0392b;
}

/* Rarity Colors Reference */
.rarity-common { color: #9d9d9d; }
.rarity-uncommon { color: #1eff00; }
.rarity-rare { color: #0070dd; }
.rarity-epic { color: #a335ee; }
.rarity-legendary { color: #ff8000; }
.rarity-mythic { color: #e6cc80; }

/* Loot Drop Section in Victory Screen */
.loot-section {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.loot-section h3 {
  margin: 0 0 var(--space-sm);
  font-size: 1rem;
  color: var(--color-olympus-gold);
  text-align: center;
}

.loot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.loot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 2px solid;
  min-width: 80px;
  animation: lootPop 0.5s ease-out;
}

@keyframes lootPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.loot-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
}

.loot-name {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.loot-rarity {
  font-size: 0.6rem;
  opacity: 0.7;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENEMY SPRITE STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.enemy-portrait {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
}

.enemy-sprite-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.3s ease;
}

.enemy-combatant:hover .enemy-sprite-img {
  transform: scale(1.1);
}

.enemy-combatant.targeted .enemy-portrait {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  border: 2px solid var(--color-olympus-gold);
}

.enemy-combatant.dead .enemy-sprite-img {
  filter: grayscale(100%) brightness(0.5);
  transform: rotate(10deg) scale(0.9);
}

.enemy-combatant.boss .enemy-portrait {
  width: 80px;
  height: 80px;
  border: 2px solid #ff8000;
  box-shadow: 0 0 20px rgba(255, 128, 0, 0.4);
}

.enemy-portrait .fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BACKGROUND STYLES FOR DIFFERENT SCREENS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Combat Screen - Arena Background */
#combat-screen {
  background: linear-gradient(rgba(13, 31, 51, 0.85), rgba(13, 31, 51, 0.9)),
              url('../assets/backgrounds/bg_arena.png');
  background-size: cover;
  background-position: center;
}

/* Character Creation - Temple Background */
#creation-screen {
  background: linear-gradient(rgba(13, 31, 51, 0.8), rgba(13, 31, 51, 0.85)),
              url('../assets/backgrounds/bg_temple.png');
  background-size: cover;
  background-position: center;
}

/* Main Menu / Loading - Olympus Background */
#loading-screen {
  background: linear-gradient(rgba(13, 31, 51, 0.7), rgba(30, 27, 75, 0.8)),
              url('../assets/backgrounds/bg_olympus.png');
  background-size: cover;
  background-position: center;
}

/* Game Screen Home - Camp Background */
.game-content {
  background: linear-gradient(rgba(13, 31, 51, 0.88), rgba(13, 31, 51, 0.92)),
              url('../assets/backgrounds/bg_camp.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Auth Screen - Olympus Background */
#auth-screen {
  background: linear-gradient(rgba(13, 31, 51, 0.75), rgba(30, 27, 75, 0.85)),
              url('../assets/backgrounds/bg_olympus.png');
  background-size: cover;
  background-position: center;
}

/* Underworld Theme for Hades Characters */
.game-content.underworld-theme {
  background: linear-gradient(rgba(13, 31, 51, 0.85), rgba(13, 31, 51, 0.9)),
              url('../assets/backgrounds/bg_underworld.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Enemy Browser Sprite Styles */
.enemy-browser-sprite {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--color-aegean-blue-dark);
  transition: transform 0.2s ease;
}

.enemy-option:hover .enemy-browser-sprite {
  transform: scale(1.1);
  border-color: var(--color-olympus-gold);
}

.enemy-icon-wrap {
  position: relative;
}

.enemy-icon-wrap .fallback {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
}

.enemy-option.easy .enemy-browser-sprite {
  border-color: var(--color-laurel-green);
}

.enemy-option.medium .enemy-browser-sprite {
  border-color: var(--color-olympus-gold);
}

.enemy-option.hard .enemy-browser-sprite {
  border-color: #ff8000;
}

.enemy-option.boss .enemy-browser-sprite,
.enemy-option.deadly .enemy-browser-sprite {
  border-color: #a335ee;
  box-shadow: 0 0 10px rgba(163, 53, 238, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VISUAL NOVEL SYSTEM STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Chapter Selection Screen */
.story-view {
  padding: var(--space-md);
}

.story-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.story-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-olympus-gold);
  margin: 0;
}

.story-subtitle {
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-top: var(--space-xs);
}

.chapter-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chapter-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 180px;
  cursor: pointer;
  transition: var(--transition-medium);
}

.chapter-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--chapter-bg);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.chapter-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 31, 51, 0.85), rgba(30, 27, 75, 0.9));
  z-index: 1;
}

.chapter-card:hover:not(.locked) {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.chapter-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.chapter-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chapter-number {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-olympus-gold);
  opacity: 0.8;
}

.chapter-icon {
  font-size: 2.5rem;
  margin: var(--space-sm) 0;
}

.chapter-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-marble-cream);
  margin: 0;
}

.chapter-card .chapter-subtitle {
  font-style: italic;
  margin-bottom: var(--space-md);
}

.chapter-progress {
  width: 100%;
  max-width: 200px;
  margin-bottom: var(--space-md);
}

.chapter-progress .progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.chapter-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-olympus-gold), var(--color-laurel-green));
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.locked-badge {
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--color-marble-cream);
  opacity: 0.7;
}

/* Chapter View - Quest List */
.chapter-view {
  min-height: 100%;
}

.chapter-header {
  position: relative;
  padding: var(--space-xl) var(--space-md);
  margin: calc(-1 * var(--space-md));
  margin-bottom: var(--space-md);
  background: var(--chapter-bg);
  background-size: cover;
  background-position: center;
}

.chapter-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 31, 51, 0.7), rgba(13, 31, 51, 0.95));
}

.chapter-header-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: var(--space-lg);
}

.chapter-header-content h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-olympus-gold);
  margin: var(--space-sm) 0;
}

.chapter-header-content p {
  color: var(--color-marble-cream);
  opacity: 0.8;
  max-width: 300px;
  margin: 0 auto;
}

.back-btn {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: var(--color-marble-cream);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.85rem;
}

.back-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.quest-list {
  padding: var(--space-md);
}

.quest-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-aegean-blue);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  border-left: 4px solid var(--color-aegean-blue-dark);
  transition: var(--transition-fast);
}

.quest-item.available {
  border-left-color: var(--color-olympus-gold);
}

.quest-item.completed {
  border-left-color: var(--color-laurel-green);
  opacity: 0.7;
}

.quest-item.locked {
  opacity: 0.5;
}

.quest-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-aegean-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--color-olympus-gold);
  flex-shrink: 0;
}

.quest-item.completed .quest-number {
  background: var(--color-laurel-green);
  color: white;
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-info h4 {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  color: var(--color-marble-cream);
}

.quest-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: 0.75rem;
}

.level-req.met {
  color: var(--color-laurel-green);
}

.level-req.unmet {
  color: var(--color-danger);
}

.quest-reward {
  color: var(--color-olympus-gold);
}

.quest-status {
  flex-shrink: 0;
}

.status-complete {
  color: var(--color-laurel-green);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VISUAL NOVEL OVERLAY
   ═══════════════════════════════════════════════════════════════════════════════ */

.vn-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vn-overlay.active {
  opacity: 1;
  visibility: visible;
}

.vn-scene {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.vn-background {
  position: absolute;
  inset: 0;
  background: var(--bg-image);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.vn-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
}

/* Character Display */
.vn-characters {
  position: absolute;
  bottom: 200px;
  left: 0;
  right: 0;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
  pointer-events: none;
}

.vn-character {
  position: absolute;
  animation: characterEnter 0.5s ease-out;
}

.vn-character.left {
  left: 10%;
}

.vn-character.right {
  right: 10%;
}

.vn-character.center {
  left: 50%;
  transform: translateX(-50%);
}

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

.vn-portrait {
  max-height: 280px;
  width: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  border-radius: var(--radius-md);
}

.vn-portrait-fallback {
  width: 120px;
  height: 160px;
  background: linear-gradient(135deg, var(--char-color), rgba(0, 0, 0, 0.5));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Dialogue Box */
.vn-dialogue-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(13, 31, 51, 0.98), rgba(13, 31, 51, 0.9));
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0));
  z-index: 2;
  min-height: 180px;
  border-top: 2px solid var(--color-olympus-gold-dark);
}

.vn-dialogue-box.narrator {
  background: linear-gradient(to top, rgba(30, 27, 75, 0.98), rgba(30, 27, 75, 0.9));
  border-top-color: #9932CC;
}

.vn-speaker {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--speaker-color);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.vn-title {
  font-size: 0.75rem;
  opacity: 0.7;
  font-family: var(--font-body);
}

.vn-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-marble-cream);
  min-height: 60px;
  max-height: 100px;
  overflow-y: auto;
}

.vn-continue {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-lg);
  font-size: 0.8rem;
  color: var(--color-olympus-gold);
  opacity: 0.7;
  animation: continuePulse 1.5s ease-in-out infinite;
}

@keyframes continuePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.continue-icon {
  animation: bounceDown 1s ease-in-out infinite;
  display: inline-block;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Choices */
.vn-choices {
  position: absolute;
  bottom: 200px;
  left: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 3;
}

.vn-choice {
  background: linear-gradient(135deg, rgba(13, 31, 51, 0.95), rgba(30, 27, 75, 0.95));
  border: 2px solid var(--color-olympus-gold-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-marble-cream);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}

.vn-choice:hover {
  background: linear-gradient(135deg, var(--color-olympus-gold-dark), rgba(30, 27, 75, 0.95));
  border-color: var(--color-olympus-gold);
  transform: translateX(8px);
}

.choice-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Controls */
.vn-controls {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  gap: var(--space-xs);
  z-index: 3;
}

.vn-btn {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-marble-cream);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.vn-btn:hover, .vn-btn.active {
  background: rgba(201, 162, 39, 0.3);
  border-color: var(--color-olympus-gold);
}

/* Reward Popup */
.vn-reward-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, var(--color-olympus-gold-dark), #2d1f00);
  border: 2px solid var(--color-olympus-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  z-index: 4;
  opacity: 0;
  transition: all 0.5s ease;
}

.vn-reward-popup.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.vn-reward-popup .reward-icon {
  font-size: 1.5rem;
}

.vn-reward-popup .reward-text {
  font-family: var(--font-display);
  color: var(--color-olympus-gold);
}

/* Visual Effects */
.vn-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vn-effect.active {
  opacity: 1;
}

.vn-effect.glow {
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3), transparent 70%);
  animation: pulseGlow 2s ease-in-out;
}

.vn-effect.shake {
  animation: screenShake 0.5s ease;
}

.vn-effect.power_surge {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent 60%);
  animation: powerSurge 1.5s ease-out;
}

.vn-effect.divine_claiming {
  background: linear-gradient(to bottom, rgba(255, 215, 0, 0.4), transparent);
  animation: divineLight 3s ease-in-out;
}

.vn-effect.mystical {
  background: radial-gradient(circle at center, rgba(128, 0, 255, 0.3), transparent 70%);
}

.vn-effect.prophecy {
  background: linear-gradient(to bottom, rgba(0, 255, 128, 0.2), transparent);
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes powerSurge {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scale(2); }
}

@keyframes divineLight {
  0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Quest Complete Screen */
.quest-complete {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-complete-content {
  text-align: center;
  z-index: 1;
  padding: var(--space-xl);
  max-width: 400px;
}

.complete-banner {
  margin-bottom: var(--space-xl);
}

.complete-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-md);
  animation: trophyBounce 1s ease;
}

@keyframes trophyBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.complete-banner h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-olympus-gold);
  margin: 0;
}

.quest-name {
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin-top: var(--space-xs);
}

.rewards-earned {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.rewards-earned h3 {
  font-size: 1rem;
  color: var(--color-olympus-gold);
  margin: 0 0 var(--space-md);
}

.rewards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.reward-item .reward-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.reward-item .reward-value {
  font-weight: bold;
  color: var(--color-marble-cream);
}

.reward-item .reward-label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.level-up-banner {
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  animation: levelUpPulse 2s ease-in-out infinite;
}

@keyframes levelUpPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.level-icon {
  font-size: 1.2rem;
  margin-right: var(--space-xs);
}

/* ===========================================
   SPRINT 1 - BATTLE PASS, SETTINGS, QUEST UI
   =========================================== */

/* ===========================================
   ENHANCED QUEST VIEW
   =========================================== */
.quest-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
}

.quest-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quest-tab:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
}

.quest-tab.active {
  background: var(--gradient-gold);
  color: var(--color-night-black);
}

.quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.quest-timer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-olympus-gold);
}

.timer-icon {
  font-size: 1.2rem;
}

.quest-progress-summary {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quest-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-text-muted);
  transition: all 0.2s ease;
}

.quest-item:hover {
  background: rgba(0, 0, 0, 0.5);
}

.quest-item.completed {
  border-left-color: var(--color-legendary);
}

.quest-item.claimed {
  opacity: 0.6;
  border-left-color: var(--color-rare);
}

.quest-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-info h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.95rem;
}

.quest-info p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.quest-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.quest-progress-bar .progress-fill {
  height: 100%;
  background: var(--gradient-gold);
  transition: width 0.3s ease;
}

.quest-progress-bar .progress-text {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.quest-rewards {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 70px;
  text-align: right;
}

.quest-rewards .reward {
  font-size: 0.8rem;
  white-space: nowrap;
}

.quest-action {
  min-width: 80px;
  text-align: center;
}

.claimed-badge {
  color: var(--color-rare);
  font-weight: 600;
  font-size: 0.85rem;
}

.in-progress {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.quest-bonus {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(100, 200, 255, 0.1), rgba(255, 215, 0, 0.1));
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.85rem;
}

/* ===========================================
   BATTLE PASS
   =========================================== */
.battle-pass {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 215, 0, 0.1));
  border-radius: var(--radius-md);
}

.bp-season h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.1rem;
}

.bp-timer {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.bp-status {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
}

.bp-status.free {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
}

.bp-status.premium {
  background: var(--gradient-gold);
  color: var(--color-night-black);
}

.bp-progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
}

.bp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.tier-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.tier-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-olympus-gold);
}

.tier-max {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.bp-xp-bar {
  flex: 1;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.bp-xp-bar .xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #D946EF);
  transition: width 0.5s ease;
}

.bp-xp-bar .xp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bp-upgrade {
  text-align: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
  border: 2px dashed var(--color-olympus-gold);
  border-radius: var(--radius-md);
}

.upgrade-bp-btn {
  margin-bottom: var(--space-sm);
}

.upgrade-info {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

.bp-rewards-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bp-rewards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  font-weight: 600;
}

.bp-legend {
  display: flex;
  gap: var(--space-md);
  font-size: 0.8rem;
  font-weight: normal;
}

.legend-premium {
  color: var(--color-olympus-gold);
}

.bp-rewards-scroll {
  max-height: 300px;
  overflow-y: auto;
}

.bp-tier-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bp-tier-row.locked {
  opacity: 0.5;
}

.bp-tier-row.current {
  background: rgba(138, 43, 226, 0.2);
}

.bp-tier-row.unlocked {
  background: rgba(255, 255, 255, 0.02);
}

.bp-tier-number {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.3);
}

.bp-tier-number.pulse {
  animation: tierPulse 2s infinite;
  color: var(--color-olympus-gold);
}

@keyframes tierPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.bp-reward-cell {
  flex: 1;
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.bp-reward-cell.free {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-reward-cell.premium {
  background: rgba(255, 215, 0, 0.05);
}

.bp-reward-cell.locked-premium {
  position: relative;
}

.bp-reward-cell .lock-icon {
  position: absolute;
  right: var(--space-sm);
  font-size: 1.2rem;
  opacity: 0.5;
}

.reward-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reward-item {
  font-size: 0.75rem;
  white-space: nowrap;
}

.reward-item.special {
  color: var(--color-olympus-gold);
  font-weight: 600;
}

.claimed-check {
  color: var(--color-rare);
  font-size: 1.2rem;
}

.btn-premium {
  background: var(--gradient-gold);
  color: var(--color-night-black);
}

/* ===========================================
   SETTINGS MODAL
   =========================================== */
.settings-modal {
  max-width: 400px;
  margin: 0 auto;
}

.settings-modal h2 {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.settings-section {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-section h3 {
  font-size: 0.9rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
}

.setting-row label:first-child {
  flex: 1;
  font-size: 0.9rem;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-olympus-gold);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Volume Slider */
.volume-slider {
  width: 100px;
  height: 6px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-olympus-gold);
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-olympus-gold);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.volume-value {
  min-width: 40px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.settings-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.settings-actions .btn {
  flex: 1;
}

.account-section {
  text-align: center;
}

.logout-btn {
  width: 100%;
}

/* ===========================================
   SMALL BUTTON VARIANT
   =========================================== */
.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
}

/* Error State */
.error-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-legendary);
}

/* ===========================================
   SPRINT 2 - ACHIEVEMENTS & PROFILE
   =========================================== */

/* ===========================================
   SECONDARY ACTION CARDS (Home View)
   =========================================== */
.secondary-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.secondary-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.secondary-action-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-olympus-gold);
  transform: translateX(4px);
}

.secondary-action-card .action-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.secondary-action-card .action-label {
  font-weight: 600;
  font-size: 1rem;
}

.secondary-action-card .action-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ===========================================
   ACHIEVEMENTS VIEW
   =========================================== */
.achievements-view {
  padding-bottom: var(--space-xl);
}

.achievements-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.achievements-header h2 {
  margin-bottom: var(--space-md);
}

.achievement-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
}

.summary-stat {
  text-align: center;
}

.summary-stat .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-olympus-gold);
}

.summary-stat .stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.summary-stat.points .stat-value {
  color: #8B5CF6;
}

.achievement-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.achievement-category {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s ease;
}

.category-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.category-icon {
  font-size: 1.3rem;
}

.category-name {
  flex: 1;
  font-weight: 600;
}

.category-progress {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.category-achievements {
  padding: var(--space-sm);
}

.achievement-category.collapsed .category-achievements {
  display: none;
}

.achievement-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-xs);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-text-muted);
  transition: all 0.2s ease;
}

.achievement-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.achievement-card.unlocked {
  border-left-color: var(--color-olympus-gold);
}

.achievement-card.claimed {
  opacity: 0.7;
  border-left-color: var(--color-rare);
}

.achievement-card.hidden-achievement {
  opacity: 0.5;
}

.achievement-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-info h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.95rem;
}

.achievement-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.achievement-progress-bar {
  margin-top: var(--space-xs);
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.achievement-progress-bar .progress-fill {
  height: 100%;
  background: var(--gradient-gold);
  transition: width 0.3s ease;
}

.achievement-progress-bar .progress-text {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.achievement-rewards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.75rem;
}

.achievement-rewards .reward {
  color: var(--color-text-muted);
}

.achievement-rewards .points {
  color: #8B5CF6;
  font-weight: 600;
}

/* Achievement Unlock Popup */
.achievement-popup {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(255, 215, 0, 0.9));
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.achievement-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.achievement-popup-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: white;
}

.popup-icon {
  font-size: 2rem;
}

.popup-text {
  display: flex;
  flex-direction: column;
}

.popup-title {
  font-size: 0.8rem;
  opacity: 0.9;
}

.popup-name {
  font-size: 1.1rem;
  font-weight: 700;
}

/* ===========================================
   PROFILE VIEW
   =========================================== */
.profile-view {
  padding-bottom: var(--space-xl);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 215, 0, 0.1));
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 3px solid var(--color-olympus-gold);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.profile-info {
  flex: 1;
}

.profile-info h2 {
  margin: 0 0 var(--space-xs) 0;
}

.profile-title {
  margin: 0;
  color: var(--color-olympus-gold);
  font-weight: 600;
}

.profile-realm {
  margin: var(--space-xs) 0 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.profile-points {
  text-align: center;
  padding: var(--space-md);
  background: rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-md);
}

.profile-points .points-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: #8B5CF6;
}

.profile-points .points-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.profile-stat-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.profile-stat-card h3 {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.profile-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
}

.profile-stat .stat-name {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.profile-stat .stat-value {
  font-weight: 600;
}

.profile-stat.highlight {
  background: rgba(255, 215, 0, 0.1);
  padding: var(--space-xs) var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm);
}

.profile-stat.highlight .stat-value {
  color: var(--color-olympus-gold);
}

.profile-stat.rare .stat-value {
  color: var(--color-rare);
}

.profile-stat.epic .stat-value {
  color: var(--color-epic);
}

.profile-stat.legendary .stat-value {
  color: var(--color-legendary);
}

/* Recent Achievements Section */
.profile-achievements {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.profile-achievements h3 {
  margin: 0 0 var(--space-md) 0;
}

.recent-achievements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.recent-achievement {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.recent-achievement .achievement-icon {
  font-size: 1.2rem;
}

.recent-achievement .achievement-name {
  flex: 1;
  font-size: 0.9rem;
}

.recent-achievement .achievement-points {
  color: #8B5CF6;
  font-weight: 600;
  font-size: 0.85rem;
}

.no-achievements {
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

.view-all-btn {
  width: 100%;
}

.back-btn {
  width: 100%;
  margin-top: var(--space-md);
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 600px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-points {
    width: 100%;
  }
  
  .achievement-summary {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .achievement-card {
    flex-wrap: wrap;
  }
  
  .achievement-rewards {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: var(--space-sm);
  }
}

/* ===========================================
   SPRINT 3 - FULL SHOP SYSTEM
   =========================================== */

/* ===========================================
   SHOP VIEW
   =========================================== */
.shop-view {
  padding-bottom: var(--space-xl);
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(138, 43, 226, 0.15));
  border-radius: var(--radius-lg);
}

.shop-header h2 {
  margin: 0;
}

.shop-currencies {
  display: flex;
  gap: var(--space-md);
}

.shop-currencies .currency {
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.shop-currencies .gems {
  border: 1px solid #8B5CF6;
}

.shop-currencies .gold {
  border: 1px solid var(--color-olympus-gold);
}

/* Shop Tabs */
.shop-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
  -webkit-overflow-scrolling: touch;
}

.shop-tab {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  white-space: nowrap;
}

.shop-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

.shop-tab.active {
  background: var(--gradient-gold);
  color: var(--color-bg-dark);
  border-color: var(--color-olympus-gold);
  font-weight: 600;
}

/* Shop Sections */
.shop-section {
  margin-bottom: var(--space-xl);
}

.shop-section h3 {
  margin: 0 0 var(--space-sm) 0;
}

.section-desc {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md) 0;
  font-size: 0.9rem;
}

/* Shop Card Grids */
.featured-grid,
.gem-packs-grid,
.gold-packs-grid,
.items-grid,
.bundles-grid,
.daily-deals-grid {
  display: grid;
  gap: var(--space-md);
}

.featured-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.gem-packs-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.gold-packs-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.items-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.bundles-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.daily-deals-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Shop Cards */
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all 0.2s ease;
}

.shop-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.shop-card.premium {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 215, 0, 0.1));
  border-color: var(--color-olympus-gold);
}

.shop-card.purchased,
.shop-card.unavailable,
.shop-card.sold-out {
  opacity: 0.6;
}

/* Card Badge */
.card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 8px;
  background: var(--gradient-gold);
  color: var(--color-bg-dark);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  z-index: 1;
}

.card-badge.discount {
  background: #EF4444;
  color: white;
}

.best-value-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  padding: 2px 8px;
  background: #10B981;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  z-index: 1;
}

.popular-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  background: #F59E0B;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  z-index: 1;
}

/* Card Content */
.card-icon {
  font-size: 2rem;
  margin-bottom: var(--space-xs);
}

.shop-card h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.95rem;
}

.card-desc {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.shop-card .ratio {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs) 0;
}

.purchase-limit {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs) 0;
}

/* Gem Amount Display */
.gem-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.main-gems {
  font-size: 1.2rem;
  font-weight: 700;
  color: #8B5CF6;
}

.bonus-gems {
  font-size: 0.75rem;
  color: #10B981;
  font-weight: 600;
}

/* Card Price */
.card-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.real-price {
  font-size: 1rem;
  font-weight: 700;
  color: #10B981;
}

.gem-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: #8B5CF6;
}

.gem-price.discounted {
  color: #10B981;
}

.original-price {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Bundle Contents */
.bundle-contents {
  width: 100%;
  margin-bottom: var(--space-sm);
  padding: var(--space-xs);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.content-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 0;
  font-size: 0.75rem;
}

.content-icon {
  width: 20px;
  text-align: center;
}

.content-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  margin: 2px;
}

/* Daily Timer */
.daily-timer {
  display: flex;
  justify-content: center;
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: #FCA5A5;
  font-weight: 600;
}

.deal-limit {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Shop Card Buttons */
.shop-card .btn {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.85rem;
}

.shop-card .btn.insufficient {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}

.shop-card .btn.disabled,
.shop-card .btn:disabled {
  background: rgba(100, 100, 100, 0.3);
  border-color: rgba(100, 100, 100, 0.5);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Rarity-based card styling */
.shop-card.rarity-common {
  border-color: var(--color-common);
}

.shop-card.rarity-uncommon {
  border-color: var(--color-uncommon);
}

.shop-card.rarity-rare {
  border-color: var(--color-rare);
}

.shop-card.rarity-epic {
  border-color: var(--color-epic);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(0, 0, 0, 0.3));
}

.shop-card.rarity-legendary {
  border-color: var(--color-legendary);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(0, 0, 0, 0.3));
}

.shop-card.rarity-mystery {
  border-color: #8B5CF6;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(0, 0, 0, 0.3));
}

/* Best Value Card */
.shop-card.best-value {
  border-color: #10B981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.shop-card.best-value::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* Popular Card */
.shop-card.popular {
  border-color: #F59E0B;
}

/* Purchase Rewards Modal */
.purchase-rewards-modal {
  text-align: center;
  padding: var(--space-md);
}

.purchase-rewards-modal h2 {
  margin-bottom: var(--space-lg);
}

.rewards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.reward-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-common);
}

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

.reward-item .item-icon {
  font-size: 1.5rem;
}

.reward-item .item-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.reward-item .item-name {
  font-weight: 600;
}

.reward-item .item-rarity {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 480px) {
  .shop-header {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  
  .shop-tabs {
    justify-content: flex-start;
  }
  
  .shop-tab {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }
  
  .featured-grid,
  .gem-packs-grid,
  .gold-packs-grid,
  .items-grid,
  .bundles-grid,
  .daily-deals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .shop-card {
    padding: var(--space-sm);
  }
  
  .card-icon {
    font-size: 1.5rem;
  }
  
  .shop-card h4 {
    font-size: 0.85rem;
  }
}

/* ===========================================
   SPRINT 4 - PVP ARENA EXPANSION
   =========================================== */

/* ===========================================
   PVP VIEW
   =========================================== */
.pvp-view {
  padding-bottom: var(--space-xl);
}

.pvp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.pvp-header h2 {
  margin: 0;
}

.pvp-currencies {
  display: flex;
  gap: var(--space-sm);
}

.pvp-currencies .currency {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
}

.pvp-currencies .honor {
  border: 1px solid var(--color-olympus-gold);
}

.pvp-currencies .tokens {
  border: 1px solid #8B5CF6;
}

/* Rank Card */
.rank-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  border: 2px solid;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.rank-icon-large {
  font-size: 3rem;
}

.rank-info {
  flex: 1;
}

.rank-info h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.2rem;
}

.rank-rating {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.rank-rating .rating-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-olympus-gold);
}

.rank-rating .rating-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.rank-progress {
  margin-top: var(--space-sm);
}

.rank-progress .progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.rank-progress .progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.rank-progress .progress-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.max-rank-badge {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: linear-gradient(135deg, #FF6B6B, #FFD700);
  color: #000;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
}

.rank-stats {
  display: flex;
  gap: var(--space-lg);
  text-align: center;
}

.rank-stats .stat .value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}

.rank-stats .stat .value.green { color: #10B981; }
.rank-stats .stat .value.red { color: #EF4444; }

.rank-stats .stat .label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Battle Section */
.pvp-battle-section {
  text-align: center;
  padding: var(--space-lg);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.battle-info {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.battle-info .streak {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.battle-info .streak.win {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
}

.battle-info .streak.loss {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.battle-info .shield-charges {
  color: #8B5CF6;
}

.find-opponent-btn {
  min-width: 200px;
}

.limit-message {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Weekly Rewards Card */
.weekly-rewards-card {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.weekly-rewards-card h4 {
  margin: 0 0 var(--space-xs) 0;
}

.weekly-rewards-card .reset-timer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm) 0;
}

.weekly-reward-preview {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.weekly-reward-preview span {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.weekly-rewards-card .reward-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0 0;
}

.weekly-rewards-card.claimed {
  opacity: 0.7;
}

/* PvP Tabs */
.pvp-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.pvp-tab {
  flex: 1;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.pvp-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pvp-tab.active {
  background: var(--gradient-gold);
  color: var(--color-bg-dark);
  border-color: var(--color-olympus-gold);
  font-weight: 600;
}

/* Match History */
.match-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.match-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border-left: 3px solid;
}

.match-entry.victory {
  border-left-color: #10B981;
}

.match-entry.defeat {
  border-left-color: #EF4444;
}

.match-result-icon {
  font-size: 1.2rem;
}

.match-entry.victory .match-result-icon {
  color: #10B981;
}

.match-entry.defeat .match-result-icon {
  color: #EF4444;
}

.match-info {
  flex: 1;
}

.match-info .opponent-name {
  display: block;
  font-weight: 600;
}

.match-info .opponent-details {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.match-rating .rating-change {
  font-weight: 600;
}

.match-rating .rating-change.positive {
  color: #10B981;
}

.match-rating .rating-change.negative {
  color: #EF4444;
}

.match-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.no-history {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-lg);
}

/* PvP Leaderboard */
.pvp-leaderboard .my-position {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.leaderboard-entry.is-me {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.leaderboard-entry.top-1 { background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), transparent); }
.leaderboard-entry.top-2 { background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), transparent); }
.leaderboard-entry.top-3 { background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), transparent); }

.leaderboard-entry .position {
  width: 30px;
  text-align: center;
  font-weight: 600;
}

.leaderboard-entry .player-info {
  flex: 1;
}

.leaderboard-entry .player-name {
  display: block;
  font-weight: 600;
}

.leaderboard-entry .player-details {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.leaderboard-entry .player-stats {
  text-align: right;
}

.leaderboard-entry .player-rating {
  display: block;
  font-weight: 600;
  color: var(--color-olympus-gold);
}

.leaderboard-entry .player-record {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Opponent Preview Modal */
.opponent-search-modal,
.opponent-preview-modal,
.battle-progress-modal,
.battle-result-modal {
  text-align: center;
  padding: var(--space-md);
}

.search-animation,
.battle-animation {
  font-size: 3rem;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.opponent-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.opponent-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.opponent-rank-icon {
  font-size: 2rem;
}

.opponent-name-section {
  flex: 1;
  text-align: left;
}

.opponent-name-section h3 {
  margin: 0;
}

.opponent-god {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.opponent-level {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.opponent-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.opp-stat {
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.opp-stat .label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.opp-stat .value {
  font-weight: 600;
}

.potential-rating {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

.potential-rating .win {
  color: #10B981;
}

.potential-rating .loss {
  color: #EF4444;
}

.battle-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

/* Battle Result Modal */
.battle-result-modal.victory .result-header {
  color: #10B981;
}

.battle-result-modal.defeat .result-header {
  color: #EF4444;
}

.result-header {
  margin-bottom: var(--space-md);
}

.result-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.rating-change {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.rating-change.positive {
  color: #10B981;
}

.rating-change.negative {
  color: #EF4444;
}

.new-rating {
  margin-bottom: var(--space-md);
}

.rank-up-celebration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(138, 43, 226, 0.2));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  to { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

.new-rank-icon {
  font-size: 2rem;
}

.battle-rewards {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.battle-rewards h4 {
  margin: 0 0 var(--space-sm) 0;
}

.battle-rewards .rewards-list {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.streak-info {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.streak-info.win {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
}

.streak-info.loss {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.battle-log-preview {
  text-align: left;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  max-height: 150px;
  overflow-y: auto;
}

.battle-log-preview h4 {
  margin: 0 0 var(--space-sm) 0;
}

.battle-log-preview .log-entries p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.result-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
@media (max-width: 600px) {
  .rank-card {
    flex-direction: column;
    text-align: center;
  }
  
  .rank-stats {
    width: 100%;
    justify-content: space-around;
  }
  
  .opponent-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .battle-actions,
  .result-actions {
    flex-direction: column;
  }
  
  .pvp-tabs {
    flex-wrap: wrap;
  }
  
  .pvp-tab {
    flex: 1 1 45%;
  }
}

/* ===========================================
   SPRINT 5 - ALLIANCE SYSTEM
   =========================================== */

/* ===========================================
   MY ALLIANCE VIEW
   =========================================== */
.my-alliance-view {
  padding-bottom: var(--space-xl);
}

.alliance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(138, 43, 226, 0.15));
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.alliance-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.alliance-tag {
  font-size: 0.85rem;
  color: var(--color-olympus-gold);
  font-weight: 600;
}

.alliance-identity h2 {
  margin: 0;
}

.alliance-realm {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.alliance-level-badge {
  text-align: center;
}

.alliance-level-badge .level-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-olympus-gold);
}

.alliance-level-badge .level-progress {
  margin-top: var(--space-xs);
}

.alliance-level-badge .progress-bar {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.alliance-level-badge .progress-fill {
  height: 100%;
  background: var(--gradient-gold);
}

.alliance-level-badge .xp-text {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.alliance-level-badge .max-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--gradient-gold);
  color: #000;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
}

/* Announcement */
.alliance-announcement {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.announce-icon {
  font-size: 1.5rem;
}

.announce-content p {
  margin: 0 0 var(--space-xs) 0;
}

.announce-author {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Alliance Stats Row */
.alliance-stats-row {
  display: flex;
  justify-content: space-around;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.alliance-stat {
  text-align: center;
}

.alliance-stat .stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
}

.alliance-stat .stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Alliance Perks */
.alliance-perks {
  padding: var(--space-md);
  background: rgba(138, 43, 226, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.alliance-perks h4 {
  margin: 0 0 var(--space-sm) 0;
}

.perks-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.perk-badge {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
}

/* Alliance Tabs */
.alliance-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.alliance-tab {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.alliance-tab:hover {
  background: rgba(255, 255, 255, 0.1);
}

.alliance-tab.active {
  background: var(--gradient-gold);
  color: var(--color-bg-dark);
  border-color: var(--color-olympus-gold);
  font-weight: 600;
}

.leave-alliance-btn {
  margin-top: var(--space-lg);
  width: 100%;
}

/* ===========================================
   ALLIANCE CHAT
   =========================================== */
.alliance-chat {
  display: flex;
  flex-direction: column;
  height: 350px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-message.system {
  color: var(--color-olympus-gold);
  font-style: italic;
}

.chat-message.donation {
  color: #10B981;
}

.chat-message.announcement {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.1);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
}

.chat-message.mine .msg-sender {
  color: var(--color-olympus-gold);
}

.msg-rank {
  flex-shrink: 0;
}

.msg-sender {
  font-weight: 600;
  flex-shrink: 0;
}

.msg-text {
  flex: 1;
  word-break: break-word;
}

.msg-time {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.chat-input-row {
  display: flex;
  gap: var(--space-sm);
}

.chat-input-row input {
  flex: 1;
}

/* ===========================================
   ALLIANCE MEMBERS
   =========================================== */
.alliance-members {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.member-row.is-me {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.member-rank-icon {
  font-size: 1.2rem;
}

.member-info {
  flex: 1;
}

.member-name {
  display: block;
  font-weight: 600;
}

.member-details {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.member-donations {
  text-align: right;
}

.member-donations .weekly {
  font-size: 0.85rem;
}

.member-actions {
  display: flex;
  gap: var(--space-xs);
}

/* ===========================================
   ALLIANCE QUESTS
   =========================================== */
.alliance-quests {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quest-reset-timer {
  text-align: center;
  padding: var(--space-sm);
  background: rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #FCA5A5;
}

.quest-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.quest-card.completed {
  border-left-color: #10B981;
}

.quest-card.claimed {
  opacity: 0.6;
}

.quest-icon {
  font-size: 1.5rem;
}

.quest-info {
  flex: 1;
}

.quest-info h4 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.95rem;
}

.quest-info p {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.quest-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.quest-progress-bar .progress-fill {
  height: 100%;
  background: var(--gradient-gold);
  transition: width 0.3s ease;
}

.quest-info .progress-text {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.quest-rewards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.8rem;
}

/* ===========================================
   ALLIANCE DONATE
   =========================================== */
.alliance-donate {
  text-align: center;
}

.donate-info {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
}

.your-gold {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.donation-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.donation-tier {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.donation-tier.insufficient {
  opacity: 0.6;
}

.tier-icon {
  font-size: 1.5rem;
}

.tier-info {
  flex: 1;
  text-align: left;
}

.tier-info h4 {
  margin: 0;
  font-size: 0.95rem;
}

.tier-cost {
  display: block;
  font-size: 0.85rem;
}

.tier-xp {
  font-size: 0.75rem;
  color: var(--color-olympus-gold);
}

/* ===========================================
   ALLIANCE SETTINGS
   =========================================== */
.alliance-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.setting-group label {
  font-size: 0.9rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.danger-zone {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
}

.danger-zone h4 {
  margin: 0 0 var(--space-sm) 0;
  color: #EF4444;
}

.danger-zone p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.danger-zone select {
  width: 100%;
  margin-bottom: var(--space-sm);
}

/* ===========================================
   ALLIANCE BROWSER
   =========================================== */
.alliance-browser {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.create-alliance-card {
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: var(--radius-lg);
}

.create-alliance-card h3 {
  margin: 0 0 var(--space-md) 0;
}

.create-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-row {
  display: flex;
  gap: var(--space-sm);
}

.form-row input:first-child {
  flex: 1;
}

.need-gold {
  font-size: 0.8rem;
  color: #EF4444;
  margin: 0;
}

.browse-alliances h3 {
  margin: 0 0 var(--space-md) 0;
}

.alliance-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.alliance-browse-card {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.alliance-browse-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.alliance-tag-small {
  color: var(--color-olympus-gold);
  font-weight: 600;
  font-size: 0.85rem;
}

.alliance-browse-header h4 {
  flex: 1;
  margin: 0;
}

.alliance-level {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.alliance-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm) 0;
}

.alliance-browse-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.alliance-browse-footer .member-count,
.alliance-browse-footer .leader {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.alliance-browse-footer .leader {
  flex: 1;
}

.no-alliances {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 480px) {
  .alliance-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }

  .alliance-stats-row {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .alliance-stat {
    flex: 1 1 30%;
  }

  .alliance-tabs {
    flex-wrap: wrap;
  }

  .alliance-tab {
    flex: 1 1 45%;
    text-align: center;
  }

  .member-row {
    flex-wrap: wrap;
  }

  .member-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-xs);
  }

  .quest-card {
    flex-wrap: wrap;
  }

  .quest-rewards {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-md);
    margin-top: var(--space-sm);
  }
}

/* ===========================================
   SPRINT 6 - POLISH & QOL
   =========================================== */

/* ===========================================
   DAILY LOGIN BANNER
   =========================================== */
.daily-login-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 107, 107, 0.2));
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
}

.daily-icon {
  font-size: 1.5rem;
  animation: bounce 1s infinite;
}

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

.daily-text {
  flex: 1;
  font-weight: 600;
}

/* ===========================================
   NOTIFICATION BADGES
   =========================================== */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #EF4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.action-card,
.secondary-action-card {
  position: relative;
}

/* ===========================================
   POINTS ALERT
   =========================================== */
.points-alert {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.points-alert .alert-item {
  font-weight: 600;
  color: #10B981;
}

/* ===========================================
   HOME TIP
   =========================================== */
.home-tip {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  text-align: center;
}

.tip-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ===========================================
   DAILY LOGIN MODAL
   =========================================== */
.daily-login-modal {
  text-align: center;
  padding: var(--space-md);
}

.daily-login-modal h2 {
  margin-bottom: var(--space-md);
}

.streak-info {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.current-streak {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-olympus-gold);
}

.longest-streak {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.login-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.calendar-day {
  position: relative;
  padding: var(--space-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all 0.2s ease;
}

.calendar-day.claimed {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
}

.calendar-day.today {
  background: rgba(255, 215, 0, 0.2);
  border-color: var(--color-olympus-gold);
  animation: pulse-glow 2s infinite;
}

.calendar-day.locked {
  opacity: 0.5;
}

.calendar-day.featured {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(255, 215, 0, 0.3));
  border-color: rgba(138, 43, 226, 0.6);
}

.day-number {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.day-rewards {
  display: flex;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

.day-reward {
  font-size: 0.9rem;
}

.claimed-check {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #10B981;
  font-size: 0.7rem;
}

.claim-indicator {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  background: #EF4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-pop 0.5s infinite alternate;
}

.today-reward-preview {
  padding: var(--space-md);
  background: rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.today-reward-preview h4 {
  margin: 0 0 var(--space-sm) 0;
}

.today-reward-preview .reward-list {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.today-reward-preview .reward-item {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}

.already-claimed {
  padding: var(--space-lg);
  color: #10B981;
}

.already-claimed span {
  font-size: 1.2rem;
  font-weight: 700;
}

.already-claimed p {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Reward claimed state */
.daily-login-modal.reward-claimed {
  animation: celebration 0.5s ease;
}

@keyframes celebration {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.claimed-rewards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.claimed-reward-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-md);
}

.claimed-reward-item .reward-icon {
  font-size: 1.5rem;
}

.claimed-reward-item .reward-text {
  font-weight: 600;
}

.streak-message {
  font-size: 1.1rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
}

/* ===========================================
   VIP MODAL
   =========================================== */
.vip-modal {
  text-align: center;
  padding: var(--space-md);
}

.vip-status {
  margin-bottom: var(--space-lg);
}

.vip-level-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.vip-icon-large {
  font-size: 3rem;
}

.vip-level-text {
  font-size: 1.2rem;
  font-weight: 700;
}

.vip-progress {
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.vip-progress p {
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
}

.vip-progress .progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.vip-progress .progress-fill {
  height: 100%;
  background: var(--gradient-gold);
}

.max-vip {
  color: var(--color-olympus-gold);
  font-weight: 600;
}

.vip-perks {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-md);
}

.vip-perks h4 {
  margin: 0 0 var(--space-sm) 0;
}

.vip-perks ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vip-perks li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vip-perks li:last-child {
  border-bottom: none;
}

.vip-tiers {
  margin-bottom: var(--space-lg);
}

.vip-tiers h4 {
  margin: 0 0 var(--space-sm) 0;
}

.tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tier-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.tier-item.locked {
  opacity: 0.5;
}

.tier-item.unlocked {
  background: rgba(255, 215, 0, 0.1);
}

.tier-icon {
  font-size: 1.2rem;
}

.tier-name {
  flex: 1;
  font-weight: 600;
}

.tier-spend {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ===========================================
   FEATURE TOOLTIP MODAL
   =========================================== */
.feature-tooltip-modal {
  text-align: center;
  padding: var(--space-lg);
}

.feature-tooltip-modal .tooltip-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.feature-tooltip-modal h2 {
  margin-bottom: var(--space-sm);
}

.feature-tooltip-modal p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.dont-show-again {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* ===========================================
   LOADING SCREEN ENHANCEMENTS
   =========================================== */
.loading-tip {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 480px) {
  .login-calendar {
    grid-template-columns: repeat(4, 1fr);
  }

  .daily-login-banner {
    flex-direction: column;
    text-align: center;
  }

  .streak-info {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* ===========================================
   MOBILE TOUCH OPTIMIZATION
   =========================================== */

/* Ensure all interactive elements have minimum touch target size */
@media (max-width: 768px) {
  /* Buttons - larger touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
  }
  
  .btn-small {
    min-height: 36px;
    padding: var(--space-xs) var(--space-md);
  }

  /* Navigation buttons */
  .nav-btn {
    min-width: 60px;
    min-height: 50px;
    padding: var(--space-sm);
  }

  /* Action cards - larger touch area */
  .action-card {
    min-height: 80px;
    padding: var(--space-md);
  }

  .secondary-action-card {
    min-height: 70px;
    padding: var(--space-md);
  }

  /* Equipment slots - larger for touch */
  .equipment-slot {
    min-height: 80px;
    padding: var(--space-md);
  }

  .equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-md);
  }

  /* Inventory items - larger touch targets */
  .inventory-item {
    min-height: 90px;
    padding: var(--space-sm);
  }

  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: var(--space-sm);
  }

  /* Ability cards - larger touch area */
  .skill-tree .ability-card {
    min-height: 140px;
    padding: var(--space-md);
  }

  .tier-abilities {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-md);
  }

  /* Quest items - taller for easier interaction */
  .quest-item {
    min-height: 100px;
    padding: var(--space-md);
  }

  /* Daily login calendar - larger cells */
  .calendar-day {
    min-height: 60px;
    padding: var(--space-sm);
  }

  .login-calendar {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }

  /* Alliance member rows - taller */
  .member-row {
    min-height: 60px;
    padding: var(--space-md);
  }

  /* Shop items - larger cards */
  .shop-item-card {
    min-height: 120px;
  }

  /* Tab buttons - larger touch area */
  .quest-tab,
  .alliance-tab,
  .shop-tab {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
  }

  /* Chat input area */
  .chat-input-row input {
    min-height: 44px;
    font-size: 1rem;
  }

  /* Modal improvements for mobile */
  .modal {
    max-height: 90vh;
    margin: 5vh auto;
  }

  .modal-body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stat allocation buttons */
  .allocation-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
  }

  /* Settings toggles */
  .toggle-switch {
    width: 56px;
    height: 30px;
  }

  .toggle-slider:before {
    width: 24px;
    height: 24px;
  }

  /* Checkboxes */
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  /* Select dropdowns */
  select {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
  }

  /* Input fields */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea {
    min-height: 44px;
    font-size: 1rem;
    padding: var(--space-sm) var(--space-md);
  }
}

/* Touch-specific enhancements */
@media (pointer: coarse) {
  /* Disable hover effects that don't work well on touch */
  .ability-card:hover,
  .inventory-item:hover,
  .equipment-slot:hover,
  .shop-item-card:hover {
    transform: none;
  }

  /* Add active states instead */
  .ability-card:active,
  .inventory-item:active,
  .equipment-slot:active,
  .shop-item-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Larger close buttons */
  .modal-close,
  .unequip-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.2rem;
  }

  /* Better scroll behavior */
  .skill-tree,
  .inventory-grid,
  .alliance-chat,
  .quest-list {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Tap highlight removal */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent text selection on interactive elements */
  .btn,
  .ability-card,
  .inventory-item,
  .equipment-slot,
  .nav-btn,
  .action-card {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Equipment slot tap-to-equip hint */
  .equipment-slot.empty::after {
    content: 'Tap to equip';
    position: absolute;
    bottom: 5px;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    opacity: 0.7;
  }

  /* Inventory item tap hint */
  .inventory-item::after {
    content: 'Tap for options';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
  }

  .inventory-item:focus::after,
  .inventory-item:active::after {
    opacity: 0.7;
  }
}

/* Small phone optimizations */
@media (max-width: 380px) {
  .player-header {
    padding: var(--space-xs) var(--space-sm);
  }

  .player-header .currency {
    font-size: 0.8rem;
    padding: var(--space-xs);
  }

  .player-info h3 {
    font-size: 0.9rem;
  }

  .game-nav {
    padding: var(--space-xs);
  }

  .nav-btn {
    min-width: 50px;
    font-size: 0.7rem;
  }

  .nav-btn .nav-icon {
    font-size: 1.1rem;
  }

  /* Compact hero view on small phones */
  .hero-header-card {
    flex-direction: column;
    text-align: center;
  }

  .power-rating {
    margin-top: var(--space-sm);
  }

  /* Smaller ability cards on tiny screens */
  .tier-abilities {
    grid-template-columns: repeat(2, 1fr);
  }

  .skill-tree .ability-card {
    min-height: 120px;
  }

  /* Two-column inventory on small screens */
  .inventory-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Calendar 3x3 on tiny screens */
  .login-calendar {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
  .modal {
    max-height: 95vh;
    margin: 2.5vh auto;
  }

  .modal-body {
    max-height: calc(95vh - 80px);
  }

  .daily-login-modal h2,
  .vip-modal h2 {
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
  }

  .login-calendar {
    grid-template-columns: repeat(7, 1fr);
  }

  .calendar-day {
    min-height: 50px;
    padding: var(--space-xs);
  }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
  .game-container {
    padding-left: max(var(--space-sm), env(safe-area-inset-left));
    padding-right: max(var(--space-sm), env(safe-area-inset-right));
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  }

  .game-nav {
    padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom));
  }
}

/* Dark mode preference (already dark, but ensure contrast) */
@media (prefers-color-scheme: dark) {
  .modal {
    background: rgba(5, 15, 30, 0.98);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ability-card.available {
    animation: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  }
}

/* ===========================================
   PVP RANK BADGE IMAGES
   =========================================== */

.rank-badge-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}

.rank-badge-img:hover {
  transform: scale(1.1);
}

.rank-badge-img-sm {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.rank-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.rank-icon-large .rank-badge-img {
  width: 90px;
  height: 90px;
}

.opponent-rank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.opponent-rank-icon .rank-badge-img-sm {
  width: 56px;
  height: 56px;
}

.new-rank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-rank-icon .rank-badge-img {
  width: 100px;
  height: 100px;
  animation: rank-up-bounce 0.6s ease;
}

@keyframes rank-up-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Rank card enhancements for image badges */
.rank-card .rank-icon-large {
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
  border-radius: 50%;
  padding: var(--space-sm);
}

/* Leaderboard rank badges */
.leaderboard-entry .rank-badge-img-sm {
  width: 32px;
  height: 32px;
}

/* Match history rank badges */
.match-history-item .rank-badge-img-sm {
  width: 28px;
  height: 28px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .rank-badge-img {
    width: 64px;
    height: 64px;
  }
  
  .rank-icon-large .rank-badge-img {
    width: 72px;
    height: 72px;
  }
  
  .new-rank-icon .rank-badge-img {
    width: 80px;
    height: 80px;
  }
  
  .rank-badge-img-sm {
    width: 40px;
    height: 40px;
  }
}

/* ===========================================
   EQUIPMENT ITEM IMAGES
   =========================================== */

.item-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  border-radius: var(--radius-sm);
}

.item-icon-img.large {
  width: 64px;
  height: 64px;
}

.equipment-slot .item-icon-img {
  width: 40px;
  height: 40px;
}

.inventory-item .item-icon-img {
  width: 48px;
  height: 48px;
}

.item-modal .item-icon-img {
  width: 72px;
  height: 72px;
}

.item-modal .item-icon-img.large {
  width: 80px;
  height: 80px;
}

/* Special effect styling */
.item-special-effect {
  color: var(--gold);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 215, 0, 0.1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
  margin: var(--space-sm) 0;
}

/* Legendary item glow effect */
.inventory-item[style*="ff8000"] .item-icon-img,
.equipment-slot[style*="ff8000"] .item-icon-img {
  animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 128, 0, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 128, 0, 0.8)); }
}

/* Mythic item glow effect */
.inventory-item[style*="e6cc80"] .item-icon-img,
.equipment-slot[style*="e6cc80"] .item-icon-img {
  animation: mythic-glow 2s ease-in-out infinite;
}

@keyframes mythic-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(230, 204, 128, 0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(230, 204, 128, 0.9)); }
}

/* Responsive adjustments for equipment images */
@media (max-width: 480px) {
  .item-icon-img {
    width: 40px;
    height: 40px;
  }
  
  .item-icon-img.large {
    width: 56px;
    height: 56px;
  }
  
  .item-modal .item-icon-img.large {
    width: 64px;
    height: 64px;
  }
}

/* ===========================================
   CURRENCY ICON IMAGES
   =========================================== */

.currency-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  vertical-align: middle;
}

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

/* Inline currency icons in text */
.currency-inline-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 2px;
}

/* Shop price icons */
.price .currency-icon-img,
.cost .currency-icon-img {
  width: 24px;
  height: 24px;
}

/* Reward display icons */
.reward .currency-icon-img {
  width: 22px;
  height: 22px;
}

/* Header resource bar */
.resource-bar .currency-icon-img {
  width: 24px;
  height: 24px;
}

/* Hover effect for currency items */
.currency-item:hover .currency-icon-img {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .currency-icon-img {
    width: 24px;
    height: 24px;
  }
  
  .currency-item .currency-icon-img {
    width: 28px;
    height: 28px;
  }
}

/* ===========================================
   WORLD MAP VIEW
   =========================================== */

.world-map-view {
  padding: 20px;
}

.world-map-view .view-header {
  text-align: center;
  margin-bottom: 30px;
}

.world-map-view .view-header h2 {
  color: var(--gold);
  font-size: 28px;
  margin-bottom: 8px;
}

.world-map-view .view-subtitle {
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.player-level-badge {
  display: inline-block;
  background: var(--primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  color: var(--gold);
}

.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.zone-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.zone-card:hover:not(.locked) {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
}

.zone-card.current {
  border-color: var(--success);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.zone-card.completed {
  border-color: var(--gold);
}

.zone-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.zone-card .zone-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.zone-card .zone-name {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.zone-card .zone-level {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 10px;
}

.zone-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.zone-progress-bar.large {
  height: 12px;
}

.zone-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.zone-progress-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.zone-locked-text {
  color: var(--error);
  font-size: 13px;
}

.zone-boss-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
}

.completed-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--success);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.world-map-footer .legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.legend-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-item .dot.unlocked { background: var(--primary); }
.legend-item .dot.current { background: var(--success); }
.legend-item .dot.completed { background: var(--gold); }
.legend-item .dot.locked { background: #555; }

/* Zone Modal */
.zone-detail-modal {
  max-width: 600px;
}

.zone-detail-modal .zone-header {
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.zone-icon-large {
  font-size: 64px;
}

.zone-header-info h2 {
  color: white;
  margin-bottom: 8px;
}

.zone-header-info p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.zone-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.zone-progress-section,
.zone-enemies-section,
.zone-boss-section,
.zone-rewards-section {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.zone-progress-section h3,
.zone-enemies-section h3,
.zone-boss-section h3,
.zone-rewards-section h3 {
  color: var(--gold);
  margin-bottom: 15px;
  font-size: 16px;
}

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

.progress-stat .label {
  color: var(--text-secondary);
  display: block;
  font-size: 13px;
}

.progress-stat .value {
  color: var(--text-primary);
  font-weight: bold;
}

.enemy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
}

.enemy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.enemy-row.too-strong {
  opacity: 0.5;
}

.enemy-icon {
  font-size: 24px;
}

.enemy-name {
  flex: 1;
  color: var(--text-primary);
}

.enemy-level {
  color: var(--text-secondary);
  font-size: 13px;
}

.enemy-rewards {
  color: var(--gold);
  font-size: 13px;
}

.boss-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 0, 0, 0.1);
  border: 2px solid rgba(255, 0, 0, 0.3);
  border-radius: 12px;
}

.zone-boss-section.locked .boss-card {
  opacity: 0.6;
}

.boss-icon-large {
  font-size: 56px;
}

.boss-info h4 {
  color: var(--error);
  font-size: 18px;
  margin-bottom: 8px;
}

.boss-stats {
  display: flex;
  gap: 15px;
  color: var(--text-secondary);
  font-size: 14px;
}

.rewards-preview {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.rewards-preview .reward {
  background: rgba(212, 175, 55, 0.2);
  padding: 8px 15px;
  border-radius: 20px;
  color: var(--gold);
}

.zone-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   EQUIPMENT SETS VIEW
   =========================================== */

.equipment-sets-view {
  padding: 20px;
}

.equipment-sets-view .view-header {
  text-align: center;
  margin-bottom: 30px;
}

.equipment-sets-view .view-header h2 {
  color: var(--gold);
  font-size: 28px;
  margin-bottom: 8px;
}

.sets-summary {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.sets-summary .stat {
  background: var(--card-bg);
  padding: 10px 20px;
  border-radius: 20px;
  color: var(--text-primary);
}

.active-bonuses-section {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
}

.active-bonuses-section h3 {
  color: var(--gold);
  margin-bottom: 15px;
}

.active-bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.active-bonus {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.active-bonus .bonus-set {
  font-weight: bold;
  color: var(--text-primary);
}

.active-bonus .bonus-pieces {
  color: var(--text-secondary);
  font-size: 13px;
}

.active-bonus .bonus-effect {
  color: var(--success);
}

.sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.set-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
}

.set-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}

.set-card.complete {
  border-color: var(--gold);
}

.set-card.has-pieces {
  border-color: var(--primary);
}

.set-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.set-name {
  color: var(--text-primary);
  font-size: 18px;
}

.set-pieces-count {
  background: var(--primary);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
}

.set-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
}

.set-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.set-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: 3px;
}

.set-pieces-preview {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.piece-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid transparent;
  opacity: 0.4;
}

.piece-icon.owned {
  opacity: 1;
  border-color: var(--primary);
}

.piece-icon.equipped {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

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

.set-bonuses-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonus-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.6;
}

.bonus-preview.active {
  color: var(--success);
  opacity: 1;
}

.bonus-preview .bonus-req {
  font-weight: bold;
  min-width: 40px;
}

.set-card .complete-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gold);
  color: var(--bg-dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Set Detail Modal */
.set-detail-modal {
  max-width: 550px;
}

.set-detail-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.set-detail-header h2 {
  color: var(--gold);
  margin-bottom: 8px;
}

.set-detail-header p {
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.set-progress {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.set-progress span {
  color: var(--text-secondary);
}

.set-progress .equipped {
  color: var(--gold);
}

.set-progress .owned {
  color: var(--primary);
}

.set-pieces-detail,
.set-bonuses-detail {
  margin-bottom: 20px;
}

.set-pieces-detail h3,
.set-bonuses-detail h3 {
  color: var(--text-primary);
  margin-bottom: 15px;
  font-size: 16px;
}

.pieces-list,
.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.piece-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.piece-row.missing {
  opacity: 0.5;
}

.piece-row.equipped {
  border: 1px solid var(--gold);
}

.piece-icon-large {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.piece-icon-large img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.piece-info {
  flex: 1;
}

.piece-info .piece-name {
  display: block;
  color: var(--text-primary);
  font-weight: bold;
}

.piece-info .piece-type {
  color: var(--text-secondary);
  font-size: 13px;
  text-transform: capitalize;
}

.piece-status {
  font-size: 13px;
}

.bonus-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.bonus-row.active {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.bonus-row .bonus-requirement {
  min-width: 80px;
  font-weight: bold;
  color: var(--text-primary);
}

.bonus-row .bonus-effect {
  flex: 1;
  color: var(--text-secondary);
}

.bonus-row.active .bonus-effect {
  color: var(--success);
}

.bonus-row .bonus-status {
  font-size: 13px;
}

/* Responsive */
@media (max-width: 600px) {
  .zones-grid {
    grid-template-columns: 1fr;
  }
  
  .sets-grid {
    grid-template-columns: 1fr;
  }
  
  .zone-header {
    flex-direction: column;
    text-align: center;
  }
  
  .boss-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ===========================================
   ENHANCED NAVIGATION FOR MORE ITEMS
   =========================================== */

.game-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.game-nav::-webkit-scrollbar {
  display: none;
}

/* Adjust nav button size for more items */
@media (max-width: 600px) {
  .game-nav .nav-btn {
    min-width: 60px;
    padding: 8px 10px;
  }
  
  .game-nav .nav-icon {
    font-size: 20px;
  }
  
  .game-nav .nav-label {
    font-size: 10px;
  }
}

/* ===========================================
   EVENTS SYSTEM STYLES
   =========================================== */

.events-view {
  padding: 1rem;
}

.events-view .view-header {
  text-align: center;
  margin-bottom: 1rem;
}

.events-view .view-header h2 {
  margin: 0 0 0.5rem 0;
}

.active-events-badge {
  display: inline-block;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  animation: pulse 2s infinite;
}

.active-bonuses-banner {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(243, 156, 18, 0.2));
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.active-bonuses-banner .banner-label {
  font-weight: bold;
  color: var(--gold);
}

.active-bonuses-banner .bonus-item {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 13px;
}

.events-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.event-tab {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.event-tab:hover {
  background: rgba(255, 255, 255, 0.2);
}

.event-tab.active {
  background: var(--primary);
  color: white;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.event-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.event-card.active {
  border-color: #2ecc71;
}

.event-card.upcoming {
  opacity: 0.8;
  border-color: #f39c12;
}

.event-card.ended {
  opacity: 0.5;
  border-color: #7f8c8d;
}

.event-card .event-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.event-card .event-info {
  flex: 1;
  min-width: 0;
}

.event-card .event-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.event-card .event-name {
  margin: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card .event-status {
  font-size: 12px;
  text-transform: capitalize;
}

.event-card .event-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card .event-meta {
  display: flex;
  gap: 1rem;
  font-size: 12px;
  color: var(--text-secondary);
}

.event-card .unclaimed-badge {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 0.5rem;
  display: inline-block;
  animation: pulse 2s infinite;
}

.event-card .event-arrow {
  font-size: 24px;
  color: var(--text-secondary);
}

/* Event Detail Modal */
.event-detail-modal {
  max-width: 500px;
  margin: 0 auto;
}

.event-banner {
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.event-icon-large {
  font-size: 48px;
}

.event-banner-info h2 {
  margin: 0 0 0.5rem 0;
}

.event-banner-info p {
  margin: 0 0 0.5rem 0;
  font-size: 14px;
  opacity: 0.9;
}

.event-timer {
  font-size: 14px;
}

.event-timer .timer-value {
  font-weight: bold;
}

.event-currency-display {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

.event-currency-display .currency-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 0.25rem;
}

.event-currency-display .currency-amount {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.event-currency-display .currency-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.join-event-section {
  text-align: center;
  margin: 1rem 0;
}

/* Event Sections */
.event-bonuses-section,
.event-milestones-section,
.event-bosses-section,
.event-activities-section,
.event-challenges-section,
.event-shop-section {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.event-bonuses-section h3,
.event-milestones-section h3,
.event-bosses-section h3,
.event-activities-section h3,
.event-challenges-section h3,
.event-shop-section h3 {
  margin: 0 0 1rem 0;
  font-size: 16px;
}

.bonuses-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bonuses-grid .bonus-item {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
}

/* Milestones */
.milestones-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.milestone-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.milestone-row.completed {
  background: rgba(46, 204, 113, 0.1);
}

.milestone-row.claimed {
  opacity: 0.6;
}

.milestone-progress {
  flex: 1;
}

.milestone-progress .progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.milestone-progress .progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
}

.milestone-progress .progress-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.milestone-reward {
  font-size: 13px;
  white-space: nowrap;
}

.milestone-action {
  min-width: 80px;
  text-align: right;
}

/* Bosses Grid */
.bosses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.boss-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  position: relative;
}

.boss-card.defeated {
  opacity: 0.6;
}

.boss-card.locked {
  opacity: 0.4;
}

.boss-card .boss-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 0.5rem;
}

.boss-card .boss-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 14px;
}

.boss-card .boss-level {
  font-size: 12px;
  color: var(--text-secondary);
}

.boss-card .boss-rewards {
  margin: 0.5rem 0;
  font-size: 12px;
}

.boss-card .boss-rewards span {
  margin: 0 4px;
}

.boss-card .defeated-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
}

/* Activities & Challenges */
.activities-list,
.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.activity-row,
.challenge-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.activity-row.completed,
.challenge-row.completed {
  background: rgba(46, 204, 113, 0.1);
}

.activity-icon {
  font-size: 24px;
}

.activity-info,
.challenge-info {
  flex: 1;
}

.activity-info h4,
.challenge-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 14px;
}

.activity-info p,
.challenge-info p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.activity-progress,
.challenge-progress {
  text-align: right;
  font-size: 12px;
}

.mini-progress-bar {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.mini-progress-bar .progress-fill {
  height: 100%;
  background: var(--primary);
}

.challenge-reward {
  font-size: 12px;
  white-space: nowrap;
}

/* Event Shop */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.shop-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.shop-item.sold-out {
  opacity: 0.5;
}

.shop-item.cannot-afford {
  opacity: 0.7;
}

.shop-item .item-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 14px;
}

.shop-item .stock {
  font-size: 11px;
  color: var(--text-secondary);
}

.shop-item .item-cost {
  font-size: 16px;
  font-weight: bold;
  margin: 0.5rem 0;
}

.shop-item .sold-out-badge {
  background: #7f8c8d;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.shop-item .cannot-afford-text {
  color: #e74c3c;
  font-size: 12px;
}

.modal-actions {
  margin-top: 1.5rem;
  text-align: center;
}

/* Event Badge in Nav */
.nav-badge.event-badge {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Responsive */
@media (max-width: 500px) {
  .event-card {
    flex-wrap: wrap;
  }
  
  .event-card .event-arrow {
    display: none;
  }
  
  .bosses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================
   HEADER CURRENCY ICON FIX
   =========================================== */

.game-header .currency .currency-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  vertical-align: middle;
  display: block; /* Remove inline default spacing */
}

.game-header .currency.gold .currency-icon-img {
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.game-header .currency.gems .currency-icon-img {
  filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.5));
}

/* Settings icon in header - match music button size */
.game-header .settings-btn .ui-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ===========================================
   NAVIGATION ICON IMAGES
   =========================================== */

.nav-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-btn:hover .nav-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 8px rgba(201, 162, 39, 0.5));
}

.nav-btn.active .nav-icon-img {
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.6));
}

@media (max-width: 480px) {
  .nav-icon-img {
    width: 24px;
    height: 24px;
  }
}

/* ===========================================
   RESOURCE BAR ICON IMAGES (HP/Mana)
   =========================================== */

.resource-bar .resource-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.resource-bar.health .resource-icon-img {
  filter: drop-shadow(0 0 3px rgba(220, 20, 60, 0.5));
}

.resource-bar.mana .resource-icon-img {
  filter: drop-shadow(0 0 3px rgba(0, 150, 255, 0.5));
}

/* ===========================================
   INVENTORY ITEM SIZE FIX
   =========================================== */

.inventory-item {
  min-width: 70px;
  min-height: 70px;
  padding: 6px;
  justify-content: center;
}

.inventory-item .item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.inventory-item .item-icon-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.inventory-item .item-icon {
  font-size: 36px;
  line-height: 1;
}

.inventory-item .item-name {
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 2px;
}

.inventory-item .item-level {
  font-size: 0.6rem;
}

/* Equipment slot sizes */
.equipment-slot {
  min-width: 80px;
  min-height: 90px;
}

.equipment-slot .item-icon-img {
  width: 48px;
  height: 48px;
}

.equipment-slot.empty .slot-icon {
  font-size: 32px;
}

.equipment-slot.empty .slot-icon .game-icon {
  width: 40px;
  height: 40px;
}

/* Home page stat icons */
.stats-overview .stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.stats-overview .stat-icon {
  flex-shrink: 0;
}

.stats-overview .stat-icon .game-icon {
  width: 24px;
  height: 24px;
}

.stats-overview .stat-name {
  flex: 1;
  text-transform: capitalize;
}

.stats-overview .stat-value {
  font-weight: bold;
  color: var(--color-gold);
}

.stats-overview .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.stats-overview .allocate-stats-btn {
  margin-top: 12px;
  width: 100%;
}

/* ===========================================
   EQUIPMENT HEADER ROW
   =========================================== */

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

.equipment-header-row h3 {
  margin: 0;
}

#auto-equip-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* ===========================================
   INVENTORY TABS
   =========================================== */

.inventory-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.inv-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.inv-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.inv-tab.active {
  background: var(--color-primary);
  color: white;
}

.inventory-tab-content {
  min-height: 300px;
}

/* ===========================================
   PLAYER MENU DROPDOWN
   =========================================== */

.player-menu-dropdown {
  position: fixed;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.player-menu-dropdown.active {
  opacity: 1;
  pointer-events: auto;
}

.player-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.player-menu {
  position: absolute;
  top: 70px;
  left: 12px;
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.98) 0%, rgba(13, 31, 51, 0.98) 100%);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.player-menu-dropdown.active .player-menu {
  transform: translateY(0);
}

.player-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.player-menu-item:hover {
  background: rgba(201, 162, 39, 0.2);
  color: var(--color-gold);
}

.player-menu-item .game-icon {
  width: 20px;
  height: 20px;
}

.menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.player-info:hover {
  opacity: 0.9;
}

.player-info:hover .player-name {
  color: var(--color-gold);
}

/* ===========================================
   ADVENTURE TABS (World Map)
   =========================================== */

.adventure-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.adv-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.adv-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.adv-tab.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}

.adv-tab .game-icon {
  width: 18px;
  height: 18px;
}

.adventure-content {
  min-height: 400px;
}

.zones-section .player-level-badge {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.story-section .story-intro {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-style: italic;
}

/* Story section chapters in tab */
.story-section .chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-section .chapter-card {
  position: relative;
  padding: 16px;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.6), rgba(13, 31, 51, 0.8));
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
}

.story-section .chapter-card:hover:not(.locked) {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.story-section .chapter-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.story-section .chapter-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.story-section .chapter-number {
  font-size: 0.7rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.story-section .chapter-icon {
  font-size: 1.5rem;
}

.story-section .chapter-title {
  flex: 1;
  font-size: 1rem;
  margin: 0;
}

.story-section .chapter-subtitle {
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 4px 0 8px;
}

.story-section .chapter-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-section .chapter-progress .progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.story-section .chapter-progress .progress-fill {
  height: 100%;
  background: var(--color-gold);
  border-radius: 3px;
}

.story-section .chapter-progress .progress-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.story-section .chapter-enter {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.story-section .locked-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ===========================================
   UI POLISH PASS - January 2026
   =========================================== */

/* ===========================================
   IMPROVED ICON STYLING
   =========================================== */

.game-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Icon hover effects in interactive elements */
button .game-icon,
a .game-icon,
.clickable .game-icon {
  transition: transform 0.15s ease, filter 0.15s ease;
}

button:hover .game-icon,
a:hover .game-icon,
.clickable:hover .game-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px rgba(201, 162, 39, 0.4));
}

/* Icon in headers */
h1 .game-icon,
h2 .game-icon,
h3 .game-icon,
h4 .game-icon {
  margin-right: 8px;
}

/* Icon with text alignment */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===========================================
   ENHANCED CARD STYLING
   =========================================== */

/* Base card improvements */
.card,
.action-card,
.secondary-action-card,
.stat-card,
.profile-stat-card,
.zone-card,
.chapter-card,
.quest-item,
.achievement-item,
.item-card {
  position: relative;
  overflow: hidden;
}

/* Subtle animated border gradient on hover */
.action-card::before,
.zone-card:not(.locked)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, transparent, var(--color-gold), transparent);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover::before,
.zone-card:not(.locked):hover::before {
  opacity: 1;
}

/* Card inner glow */
.action-card:hover,
.secondary-action-card:hover {
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(201, 162, 39, 0.1);
}

/* ===========================================
   ENHANCED BUTTON STYLING
   =========================================== */

/* Primary button improvements */
.btn-primary {
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s ease;
}

.btn-primary:hover::after {
  transform: translateX(100%) rotate(45deg);
}

/* Glow button */
.btn-glow {
  animation: btn-pulse 2s infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 39, 0.5); }
  50% { box-shadow: 0 0 20px rgba(201, 162, 39, 0.8), 0 0 30px rgba(201, 162, 39, 0.4); }
}

/* ===========================================
   ENHANCED TAB STYLING
   =========================================== */

/* Universal tab styling */
.quest-tabs,
.shop-tabs,
.pvp-tabs,
.inventory-tabs,
.adventure-tabs,
.alliance-tabs,
.inv-tab,
.quest-tab,
.shop-tab,
.pvp-tab,
.adv-tab,
.alliance-tab {
  position: relative;
}

/* Tab underline indicator */
.quest-tab.active::after,
.shop-tab.active::after,
.pvp-tab.active::after,
.inv-tab.active::after,
.adv-tab.active::after,
.alliance-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

/* Tab icons */
.quest-tab .game-icon,
.shop-tab .game-icon,
.pvp-tab .game-icon,
.inv-tab .game-icon,
.adv-tab .game-icon,
.alliance-tab .game-icon {
  margin-right: 6px;
}

/* ===========================================
   IMPROVED MODAL STYLING
   =========================================== */

#modal-body {
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.98) 0%, rgba(13, 31, 51, 0.98) 100%);
  border: 2px solid var(--color-gold);
  box-shadow: 
    0 0 60px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(201, 162, 39, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Modal header */
#modal-body h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   IMPROVED STAT DISPLAY
   =========================================== */

/* Stat box polish */
.stat-box,
.stat-item,
.profile-stat {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: var(--transition-fast);
}

.stat-box:hover,
.stat-item:hover,
.profile-stat:hover {
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.3);
}

/* Stat icon styling */
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.stat-icon .game-icon {
  width: 100%;
  height: 100%;
}

/* ===========================================
   LOADING STATES
   =========================================== */

.loading,
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  gap: 12px;
}

.loading::before,
.loading-spinner::before {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid rgba(201, 162, 39, 0.3);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===========================================
   NOTIFICATION BADGES
   =========================================== */

.notification-badge,
.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ff4757 0%, #c41e3a 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(196, 30, 58, 0.4);
  animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ===========================================
   RARITY COLORS (IMPROVED)
   =========================================== */

.rarity-common { color: #9ca3af; border-color: #9ca3af; }
.rarity-uncommon { color: #22c55e; border-color: #22c55e; }
.rarity-rare { color: #3b82f6; border-color: #3b82f6; text-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
.rarity-epic { color: #a855f7; border-color: #a855f7; text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
.rarity-legendary { 
  color: #f59e0b; 
  border-color: #f59e0b; 
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  animation: legendary-glow 2s ease-in-out infinite;
}
.rarity-mythic { 
  background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #ff6b6b);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-shift 3s linear infinite;
  text-shadow: none;
}

@keyframes legendary-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.3)); }
  50% { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6)); }
}

@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ===========================================
   PROGRESS BARS (ENHANCED)
   =========================================== */

.progress-bar,
.xp-bar,
.health-bar,
.mana-bar {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-fill,
.xp-fill,
.health-fill,
.mana-fill {
  height: 100%;
  border-radius: 4px;
  position: relative;
  transition: width 0.5s ease;
}

/* Animated shine on progress bars */
.progress-fill::after,
.xp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* Health bar gradient */
.health-bar .progress-fill,
.health-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Mana bar gradient */
.mana-bar .progress-fill,
.mana-fill {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* XP bar gradient */
.xp-bar .progress-fill,
.xp-fill {
  background: linear-gradient(90deg, var(--color-gold), #d4a741);
}

/* ===========================================
   SCROLLBAR STYLING
   =========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-gold), #8b7355);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d4a741, var(--color-gold));
}

/* ===========================================
   TOOLTIP STYLING
   =========================================== */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 8px 12px;
  background: rgba(13, 31, 51, 0.95);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  pointer-events: none;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* ===========================================
   EMPTY STATES
   =========================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  margin-bottom: 16px;
  max-width: 300px;
}

/* ===========================================
   DIVIDERS & SEPARATORS
   =========================================== */

.divider,
.menu-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 39, 0.3),
    transparent
  );
  margin: 12px 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 162, 39, 0.3),
    transparent
  );
  margin: 0 12px;
}

/* ===========================================
   ARENA SYSTEM - DUAL MODE
   =========================================== */

/* Arena Mode Selection */
.arena-mode-selection {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.arena-mode-card {
  flex: 1;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.9) 0%, rgba(13, 31, 51, 0.95) 100%);
  border: 2px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.arena-mode-card:hover:not(.disabled) {
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(201, 162, 39, 0.2);
}

.arena-mode-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.arena-mode-card .mode-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.arena-mode-card .mode-icon.live-pulse {
  animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.3); }
}

.arena-mode-card .mode-info h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: var(--color-gold);
}

.arena-mode-card .mode-info p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.arena-mode-card .mode-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.arena-mode-card .online-count {
  color: #22c55e;
}

.arena-mode-card .mode-rewards {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
}

.arena-mode-card .mode-rewards .bonus {
  color: #22c55e;
}

.arena-mode-card.live::before {
  content: 'LIVE';
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Streak Banner */
.streak-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.streak-banner.win {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 88, 12, 0.2));
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.streak-banner.loss {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #3b82f6;
}

.streak-banner .streak-bonus {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: 8px;
}

/* Shield Banner */
.shield-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: var(--radius-md);
  color: #22c55e;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.shield-banner .shield-note {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Ranked Arena Modal */
.ranked-arena-modal {
  max-width: 500px;
}

.opponents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.opponent-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: all 0.2s ease;
}

.opponent-card:hover {
  border-color: var(--color-gold);
  background: rgba(201, 162, 39, 0.1);
}

.opponent-card.is-bot {
  opacity: 0.8;
}

.opponent-card.is-bot::after {
  content: 'AI';
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(107, 114, 128, 0.8);
  color: white;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
}

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

.opponent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-gold);
}

.opponent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opponent-info {
  flex: 1;
}

.opponent-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: white;
}

.opponent-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: block;
}

.opponent-level {
  font-size: 0.7rem;
  color: var(--color-gold);
}

.opponent-rank {
  text-align: right;
}

.opponent-rank .rank-icon {
  font-size: 1.5rem;
}

.opponent-rank .rank-rating {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.opponent-stats {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.opponent-stats .stat-item {
  text-align: center;
}

.opponent-stats .stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.opponent-stats .stat-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.opponent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.difficulty-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.rating-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  text-align: right;
}

.win-preview { color: #22c55e; }
.loss-preview { color: #ef4444; }

.opponents-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Live Arena Queue */
.live-arena-modal {
  max-width: 420px;
}

.live-arena-info {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.live-arena-info .info-card {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}

.live-arena-info .info-card h4 {
  font-size: 0.85rem;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.live-arena-info .info-card p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

.queue-status {
  text-align: center;
  padding: 20px 0;
}

.queue-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.queue-searching {
  text-align: center;
}

.queue-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(201, 162, 39, 0.3);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 1s linear infinite;
}

.queue-searching h3 {
  color: var(--color-gold);
  margin-bottom: 8px;
}

.queue-timer {
  font-size: 1.2rem;
  color: white;
  margin-bottom: 4px;
}

.queue-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Match Found */
.match-found {
  text-align: center;
  animation: matchFoundPulse 0.5s ease;
}

@keyframes matchFoundPulse {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.match-opponent {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px 0;
}

.match-opponent .opponent-avatar {
  width: 64px;
  height: 64px;
}

.match-opponent .opponent-info {
  text-align: left;
}

.match-opponent .opponent-info h4 {
  margin: 0 0 4px 0;
}

.match-countdown {
  font-size: 1.1rem;
  color: var(--color-gold);
}

/* Battle Result */
.battle-result-modal {
  max-width: 400px;
  text-align: center;
}

.battle-result-modal.victory {
  border-color: #22c55e;
}

.battle-result-modal.defeat {
  border-color: #ef4444;
}

.result-header {
  margin-bottom: 16px;
}

.result-title {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.battle-result-modal.victory .result-title {
  color: #22c55e;
}

.battle-result-modal.defeat .result-title {
  color: #ef4444;
}

.rank-up-banner {
  background: linear-gradient(135deg, var(--color-gold), #d4a741);
  color: #1a1a2e;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  display: inline-block;
  animation: rankUpPulse 1s ease infinite;
}

@keyframes rankUpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rating-change {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 16px 0;
}

.rating-change.positive { color: #22c55e; }
.rating-change.negative { color: #ef4444; }

.rating-change .change-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.shield-used {
  display: block;
  font-size: 0.8rem;
  color: #22c55e;
  margin-top: 4px;
}

.new-rating {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}

.new-rating .rating-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 8px;
}

.rank-change-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.rank-arrow {
  font-size: 1.5rem;
  color: var(--color-gold);
}

.battle-rewards {
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}

.battle-rewards h4 {
  margin-bottom: 8px;
  color: var(--color-gold);
}

.reward-items {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reward-item.bonus {
  color: #22c55e;
}

.streak-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.streak-display.win {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.streak-display.loss {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.streak-display .new-best {
  font-size: 0.7rem;
  background: var(--color-gold);
  color: #1a1a2e;
  padding: 2px 6px;
  border-radius: 4px;
}

.battle-stats-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.achievements-earned {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}

.achievements-earned h4 {
  color: #a855f7;
  margin-bottom: 8px;
}

/* Battle Starting */
.battle-starting-modal {
  text-align: center;
}

.battle-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 24px 0;
}

.battle-fighter {
  text-align: center;
}

.fighter-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-gold);
  margin-bottom: 8px;
}

.fighter-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fighter-avatar.loading-pulse {
  background: rgba(201, 162, 39, 0.3);
  animation: pulse 1.5s ease infinite;
}

.vs-text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gold);
}

/* Colors */
.green { color: #22c55e; }
.red { color: #ef4444; }

/* ===========================================
   LIVE BATTLE ARENA UI
   =========================================== */

/* Fullscreen battle modal */
.live-battle-modal.fullscreen {
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
}

.live-battle-arena {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

/* Battle Header */
.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
}

.turn-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.turn-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold);
}

.turn-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.timer-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.1s linear, background 0.3s ease;
  border-radius: 4px;
}

.timer-text {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 35px;
  text-align: right;
}

/* Battle Field */
.battle-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.battle-fighter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.battle-fighter.opponent-side {
  border-color: rgba(239, 68, 68, 0.3);
}

.battle-fighter.your-side {
  border-color: rgba(34, 197, 94, 0.3);
  flex-direction: row-reverse;
}

.fighter-portrait {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-gold);
  flex-shrink: 0;
}

.fighter-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fighter-level {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: #1a1a2e;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}

.fighter-info {
  flex: 1;
  min-width: 0;
}

.your-side .fighter-info {
  text-align: right;
}

.fighter-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.you-badge {
  font-size: 0.7rem;
  color: #22c55e;
  font-weight: 400;
}

.fighter-rating {
  font-size: 0.8rem;
  font-weight: 500;
}

.fighter-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 120px;
  flex-shrink: 0;
}

.health-bar, .mana-bar {
  position: relative;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.bar-fill.health {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

.bar-fill.mana {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* VS Indicator */
.battle-vs-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
}

.vs-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-gold);
  text-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

.turn-arrow {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.turn-arrow.your-turn {
  color: #22c55e;
  animation: bounceDown 0.5s ease infinite;
}

.turn-arrow.opponent-turn {
  color: #ef4444;
  animation: bounceUp 0.5s ease infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

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

/* Battle Log */
.battle-log {
  max-height: 100px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
  padding: 8px;
  font-size: 0.75rem;
}

.log-entry {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.log-entry.system {
  color: var(--text-secondary);
  font-style: italic;
}

.log-entry.you {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.log-entry.opponent {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Abilities Panel */
.abilities-panel {
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-md);
  padding: 12px;
}

.abilities-header {
  text-align: center;
  margin-bottom: 10px;
}

.waiting-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.waiting-text.your-turn {
  color: #22c55e;
  font-weight: 600;
  animation: pulse 1s ease infinite;
}

.abilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.ability-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(30, 58, 95, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
}

.ability-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ability-btn.available {
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.3);
}

.ability-btn.available:hover {
  background: rgba(201, 162, 39, 0.2);
  transform: translateY(-2px);
}

.ability-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

.ability-details {
  flex: 1;
  min-width: 0;
}

.ability-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ability-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.ability-cooldown {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f59e0b;
}

/* Battle Actions */
.battle-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.forfeit-btn {
  opacity: 0.7;
}

.forfeit-btn:hover {
  opacity: 1;
}

/* Damage Number Animation */
@keyframes damageFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.5);
  }
}

/* Connecting State */
.live-battle-connecting {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* ===========================================
   TITLES SYSTEM UI
   =========================================== */

/* Equipped Title Display (Hero View) */
.equipped-title-display {
  margin: 4px 0;
}

.title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.2), rgba(201, 162, 39, 0.1));
  border: 1px solid rgba(201, 162, 39, 0.4);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--color-gold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.title-badge:hover {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.2));
  border-color: var(--color-gold);
}

.btn-text {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-text:hover {
  color: var(--color-gold);
}

/* Title Manager Modal */
.title-manager-modal {
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.title-manager-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 60vh;
  padding-right: 8px;
}

/* Equipped Title Card */
.equipped-title-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
}

.equipped-title-card h4 {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.equipped-title-display-large {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: var(--radius-md);
  padding: 12px;
}

.equipped-title-display-large .title-icon {
  font-size: 2rem;
}

.equipped-title-display-large .title-info {
  flex: 1;
}

.equipped-title-display-large .title-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
}

.equipped-title-display-large .title-rarity {
  font-size: 0.7rem;
  opacity: 0.7;
}

.equipped-title-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.equipped-title-stats .stat-bonus {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.no-title-equipped {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
}

.no-title-equipped .hint {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Collection Stats */
.collection-stats {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

/* Category Tabs */
.title-category-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.title-cat-tab {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.title-cat-tab:hover {
  border-color: var(--color-gold);
  color: white;
}

.title-cat-tab.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Titles Grid */
.titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

/* Title Card */
.title-card {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.title-card.owned {
  background: rgba(30, 58, 95, 0.5);
}

.title-card.owned:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.title-card.locked {
  opacity: 0.7;
}

.title-card.equipped {
  box-shadow: 0 0 15px rgba(201, 162, 39, 0.3);
}

.title-card.equipped::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-gold);
  pointer-events: none;
}

.title-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.title-card .title-icon {
  font-size: 1.5rem;
}

.title-name-section {
  flex: 1;
}

.title-card .title-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.title-card .title-rarity {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.equipped-badge {
  background: var(--color-gold);
  color: #1a1a2e;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.title-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.title-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.title-stats .stat-bonus {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.title-stats .stat-bonus.locked {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.title-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.75rem;
}

.token-cost {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gold);
}

.requirement-text {
  color: #ef4444;
  font-size: 0.7rem;
}

.source-text {
  color: var(--text-secondary);
  font-style: italic;
}

.title-actions {
  display: flex;
  justify-content: flex-end;
}

/* Rarity glow effects */
.title-card[style*="legendary"] .title-icon,
.title-card[style*="#f59e0b"] .title-icon {
  animation: legendaryGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5)); }
  50% { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)); }
}

.title-card[style*="mythic"] .title-icon,
.title-card[style*="#ec4899"] .title-icon {
  animation: mythicGlow 2s ease-in-out infinite;
}

@keyframes mythicGlow {
  0% { filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.5)); }
  33% { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); }
  66% { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6)); }
  100% { filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.5)); }
}

/* Stat Comparison */
.stat-comparison {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 10px;
}

.comparison-header {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-style: italic;
}

.comparison-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stat-diff {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.3);
}

.stat-diff-none {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ===========================================
   ENHANCED ARENA SHOP
   =========================================== */

.arena-shop-enhanced {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Shop Header */
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
}

.shop-balance {
  display: flex;
  align-items: center;
  gap: 8px;
}

.balance-amount {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-gold);
}

.balance-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Shop Tabs */
.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.shop-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-tab:hover {
  border-color: var(--color-gold);
  color: white;
}

.shop-tab.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.tab-badge {
  background: var(--color-gold);
  color: #1a1a2e;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}

/* Shop Items Section */
.shop-items-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-category h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.shop-item-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.shop-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.item-icon-large {
  font-size: 2rem;
  text-align: center;
}

.item-details {
  text-align: center;
}

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

.item-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.item-rarity {
  font-size: 0.65rem;
  font-weight: 600;
}

.item-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.item-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--color-gold);
}

/* Shop Titles Section */
.shop-titles-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.titles-group {
  margin-bottom: 12px;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.group-header.available {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.group-header.locked {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.group-header.owned {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.shop-title-card {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: var(--radius-md);
  padding: 12px;
  transition: all 0.2s ease;
}

.shop-title-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.shop-title-card.owned {
  background: rgba(30, 58, 95, 0.5);
}

.shop-title-card.locked {
  opacity: 0.7;
}

.title-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.shop-title-card .title-icon {
  font-size: 1.5rem;
}

.title-name-area {
  flex: 1;
}

.shop-title-card .title-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.shop-title-card .title-rarity {
  font-size: 0.65rem;
  font-weight: 600;
}

.owned-badge {
  background: #22c55e;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
}

.title-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.title-stats-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.stat-tag {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.stat-tag.locked {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.title-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.requirement-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #ef4444;
}

.title-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--color-gold);
}

.shop-hint {
  text-align: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Title Showcase (Leaderboard & Opponents) */
.player-name-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.opponent-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 0;
}

/* Leaderboard top entries with title glow */
.leaderboard-entry.top-1 .player-title-badge,
.leaderboard-entry.top-2 .player-title-badge,
.leaderboard-entry.top-3 .player-title-badge {
  text-shadow: 0 0 8px currentColor;
}

/* ===========================================
   SOCIAL HUB & CHAT SYSTEM
   =========================================== */

/* Social View Layout */
.social-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 180px);
}

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

.social-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.social-tabs {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.social-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.social-tab:hover {
  border-color: var(--color-gold);
  color: white;
}

.social-tab.active {
  background: rgba(201, 162, 39, 0.2);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.social-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Chat Section */
.chat-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.chat-channel-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.channel-tab {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.channel-tab:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.channel-tab.active {
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  color: #60a5fa;
}

.channel-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chat Window */
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 300px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
}

.empty-chat .hint {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Chat Message */
.chat-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  max-width: 85%;
}

.chat-message.sent {
  align-self: flex-end;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.chat-message.received {
  align-self: flex-start;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.sender-name {
  font-weight: 600;
}

.sender-level {
  color: var(--text-secondary);
}

.sender-title {
  color: var(--color-gold);
  font-size: 0.7rem;
}

.message-time {
  color: var(--text-secondary);
  margin-left: auto;
  font-size: 0.7rem;
}

.message-content {
  font-size: 0.9rem;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Typing Indicator */
.typing-indicator {
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Chat Input */
.chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input-area input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.9rem;
}

.chat-input-area input:focus {
  outline: none;
  border-color: var(--color-gold);
}

.send-btn {
  padding: 10px 16px;
}

/* Online Users Panel */
.online-users-panel {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  max-height: 150px;
  overflow-y: auto;
}

.online-users-panel h4 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.online-friend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.online-friend-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.no-online {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Conversation List */
.conversation-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

.conversation-header h4 {
  margin: 0;
}

.conversations {
  flex: 1;
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.conversation-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.conversation-item.unread {
  border-left: 3px solid var(--color-gold);
}

.conv-avatar {
  position: relative;
}

.conv-avatar .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}

.conv-info {
  flex: 1;
}

.conv-name {
  display: block;
  font-weight: 600;
}

.conv-preview {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.unread-badge {
  background: var(--color-gold);
  color: #1a1a2e;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.conv-time {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Private Chat Header */
.private-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.recipient-name {
  flex: 1;
  font-weight: 600;
}

.recipient-status {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.recipient-status.online {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.recipient-status.offline {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

/* Friends Section */
.friends-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.friends-header h3 {
  margin: 0;
}

/* Friend Requests */
.friend-requests-section,
.outgoing-requests-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 12px;
}

.friend-requests-section h4,
.outgoing-requests-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px 0;
  font-size: 0.9rem;
}

.requests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
}

.request-user {
  display: flex;
  flex-direction: column;
}

.request-actions {
  display: flex;
  gap: 6px;
}

/* Friends Grid */
.friends-list-section h4 {
  margin: 0 0 10px 0;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.friend-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.friend-card:hover {
  background: rgba(0, 0, 0, 0.4);
}

.friend-status {
  font-size: 1.2rem;
}

.status-indicator {
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
}

.friend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.friend-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-details {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.friend-rating {
  font-size: 0.75rem;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 4px;
}

.friend-actions {
  display: flex;
  gap: 6px;
}

/* Add Friend Modal */
.add-friend-modal {
  max-width: 450px;
}

.search-section {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-section input {
  flex: 1;
}

.search-results {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.result-info {
  display: flex;
  flex-direction: column;
}

.result-name {
  font-weight: 600;
}

.result-details {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.online-badge {
  font-size: 0.7rem;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 2px;
  display: inline-block;
}

.already-friend,
.pending,
.blocked {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Friend Options Modal */
.friend-options-modal {
  max-width: 300px;
  text-align: center;
}

.friend-options-modal h3 {
  margin-bottom: 16px;
}

.option-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.option-buttons .btn {
  width: 100%;
  justify-content: center;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* ===========================================
   CHARACTER BUILD SCREEN
   =========================================== */

.build-view {
  padding: 16px;
  max-width: 100%;
}

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

.build-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.build-points {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.point-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.point-badge.stat {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.point-badge.skill {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.point-badge.talent {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.build-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.build-tab {
  padding: 10px 20px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-weight: 500;
}

.build-tab:hover {
  background: rgba(255,255,255,0.2);
}

.build-tab.active {
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #1a1a2e;
}

.build-content {
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  padding: 16px;
  min-height: 400px;
}

/* Paths Tab */
.paths-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.god-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(212, 175, 55, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.god-header .god-icon {
  font-size: 3rem;
}

.god-header h3 {
  margin: 0;
  color: #d4af37;
}

.god-header p {
  margin: 4px 0 0;
  opacity: 0.8;
  font-size: 0.9rem;
}

.innate-passives h4 {
  margin: 0 0 12px;
  color: #d4af37;
}

.passives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.passive-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}

.passive-card .passive-icon {
  font-size: 2rem;
}

.passive-card strong {
  display: block;
  margin-bottom: 4px;
  color: #ffd700;
}

.passive-card p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.path-selection h4 {
  margin: 0 0 8px;
  color: #d4af37;
}

.path-hint {
  margin: 0 0 16px;
  opacity: 0.7;
  font-size: 0.9rem;
}

.paths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.path-card {
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.path-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
}

.path-card.selected {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
}

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

.path-header .path-icon {
  font-size: 2rem;
}

.path-header h5 {
  margin: 0;
  flex: 1;
  font-size: 1.1rem;
}

.archetype-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.path-card.tank .archetype-badge { background: #3498db; }
.path-card.bruiser .archetype-badge { background: #e67e22; }
.path-card.assassin .archetype-badge { background: #9b59b6; }
.path-card.mage .archetype-badge { background: #8e44ad; }
.path-card.support .archetype-badge { background: #27ae60; }
.path-card.controller .archetype-badge { background: #e74c3c; }

.path-desc {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.path-theme {
  margin: 0 0 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}

.path-stats {
  font-size: 0.85rem;
  opacity: 0.8;
}

.path-progress {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.6;
}

.selected-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #27ae60;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.select-path-prompt {
  text-align: center;
  padding: 40px;
  opacity: 0.7;
}

/* Ability Tree */
.ability-tree {
  margin-top: 24px;
}

.ability-tree h4 {
  margin: 0 0 16px;
  color: #d4af37;
}

.ability-tier {
  margin-bottom: 24px;
}

.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tier-name {
  font-weight: 600;
  font-size: 1rem;
}

.tier-unlock {
  font-size: 0.8rem;
  opacity: 0.6;
}

.tier-abilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.ability-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: center;
}

.ability-node:hover {
  transform: scale(1.05);
}

.ability-node.unlocked {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.15);
}

.ability-node.available {
  border-color: #f39c12;
  background: rgba(243, 156, 18, 0.15);
}

.ability-node.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.ability-node .ability-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.ability-node .ability-name {
  font-size: 0.8rem;
  font-weight: 500;
}

.ability-node .ability-level {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #27ae60;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
}

.ability-node .unlock-indicator {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f39c12;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.ability-node .lock-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.8rem;
  opacity: 0.5;
}

/* Stats Tab */
.stats-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.stats-header h4 {
  margin: 0;
  color: #d4af37;
}

.points-remaining {
  font-size: 0.9rem;
}

.points-remaining strong {
  color: #d4af37;
}

.stats-allocation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  gap: 16px;
}

.stat-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.stat-info .stat-icon {
  font-size: 1.5rem;
}

.stat-info .stat-text strong {
  display: block;
}

.stat-info .stat-text small {
  font-size: 0.75rem;
  opacity: 0.7;
}

.stat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}

.stat-btn:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.3);
}

.stat-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stat-value {
  min-width: 100px;
  text-align: center;
  font-family: monospace;
}

.stat-value .base {
  opacity: 0.7;
}

.stat-value .bonus {
  color: #27ae60;
}

.stat-value .total {
  font-weight: 600;
  color: #d4af37;
}

.stats-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.secondary-stats h4 {
  margin: 0 0 12px;
  color: #d4af37;
}

.secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.secondary-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
}

.secondary-stat .stat-icon {
  font-size: 1.2rem;
}

.secondary-stat .stat-name {
  flex: 1;
  font-size: 0.85rem;
}

.secondary-stat .stat-value {
  font-weight: 600;
  color: #d4af37;
}

/* Talents Tab */
.talent-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.talent-locked .lock-icon {
  font-size: 4rem;
  opacity: 0.5;
  margin-bottom: 16px;
}

.talent-locked h4 {
  margin: 0 0 8px;
}

.talent-locked p {
  margin: 0 0 16px;
  opacity: 0.7;
}

.talent-locked .progress-bar {
  width: 200px;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.talent-locked .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #ffd700);
  transition: width 0.3s;
}

.talents-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.talents-header h4 {
  margin: 0;
  color: #d4af37;
}

.talent-trees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.talent-tree {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  overflow: hidden;
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.1);
}

.tree-header .tree-icon {
  font-size: 1.5rem;
}

.tree-header h5 {
  margin: 0;
  flex: 1;
}

.tree-points {
  font-size: 0.85rem;
  opacity: 0.7;
}

.tree-talents {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talent-node {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.talent-node:hover:not(.locked) {
  background: rgba(255,255,255,0.1);
}

.talent-node.active {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.15);
}

.talent-node.available {
  border-color: #f39c12;
}

.talent-node.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.talent-node .talent-icon {
  font-size: 1.3rem;
}

.talent-node .talent-name {
  flex: 1;
  font-size: 0.9rem;
}

.talent-node .talent-rank {
  font-size: 0.8rem;
  padding: 2px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}

.talent-actions {
  display: flex;
  justify-content: center;
}

/* Loadout Tab */
.loadout-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.loadout-header {
  text-align: center;
}

.loadout-header h4 {
  margin: 0 0 4px;
  color: #d4af37;
}

.loadout-header p {
  margin: 0;
  opacity: 0.7;
  font-size: 0.9rem;
}

.equipped-abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .equipped-abilities {
    grid-template-columns: repeat(3, 1fr);
  }
}

.loadout-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.2);
  min-height: 100px;
  position: relative;
  transition: all 0.2s;
}

.loadout-slot.filled {
  border-style: solid;
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
}

.loadout-slot .ability-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.loadout-slot .ability-name {
  font-size: 0.75rem;
  text-align: center;
}

.loadout-slot .unequip-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.8);
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}

.loadout-slot .empty-slot {
  opacity: 0.5;
  font-size: 0.85rem;
}

.available-abilities h4 {
  margin: 0 0 12px;
  color: #d4af37;
}

.abilities-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.ability-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  transition: all 0.2s;
}

.ability-item:hover {
  background: rgba(255,255,255,0.1);
}

.ability-item.equipped {
  opacity: 0.5;
}

.ability-item .ability-icon {
  font-size: 1.8rem;
}

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

.ability-item .ability-info strong {
  display: block;
  margin-bottom: 2px;
}

.ability-item .ability-info small {
  opacity: 0.7;
  font-size: 0.8rem;
}

.ability-item .equip-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #1a1a2e;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ability-item .equip-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.ability-item .equip-btn:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
}

/* Ability Detail Modal */
.ability-detail-modal {
  max-width: 400px;
}

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

.ability-detail-modal .ability-icon.large {
  font-size: 3rem;
}

.ability-detail-modal h3 {
  margin: 0;
}

.ability-detail-modal .ability-type {
  opacity: 0.7;
  font-size: 0.9rem;
}

.ability-detail-modal .ability-description {
  margin: 0 0 16px;
  line-height: 1.5;
}

.ability-detail-modal .ability-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ability-detail-modal .ability-stats .stat {
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  font-size: 0.9rem;
}

.ability-detail-modal .ability-stats .stat span {
  opacity: 0.7;
}

.ability-detail-modal .ability-requires {
  margin-bottom: 16px;
  font-size: 0.9rem;
  opacity: 0.8;
}

.ability-detail-modal .ability-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ability-detail-modal .ability-actions .btn {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 5 ENHANCEMENTS - Zone & Quest System Polish
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE CARD ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

/* Zone card entrance animation */
.zone-card {
  animation: zone-card-enter 0.4s ease backwards;
}

.zone-card:nth-child(1) { animation-delay: 0.05s; }
.zone-card:nth-child(2) { animation-delay: 0.1s; }
.zone-card:nth-child(3) { animation-delay: 0.15s; }
.zone-card:nth-child(4) { animation-delay: 0.2s; }
.zone-card:nth-child(5) { animation-delay: 0.25s; }
.zone-card:nth-child(6) { animation-delay: 0.3s; }

@keyframes zone-card-enter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Current zone pulsing border */
.zone-card.current {
  animation: current-zone-pulse 2s ease infinite;
}

@keyframes current-zone-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.6);
  }
}

/* Completed zone shine effect */
.zone-card.completed::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(212, 175, 55, 0.1),
    transparent
  );
  animation: zone-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes zone-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  50%, 100% { transform: translateX(100%) rotate(45deg); }
}

/* Locked zone overlay effect */
.zone-card.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Zone icon bounce on hover */
.zone-card:hover:not(.locked) .zone-icon {
  animation: zone-icon-bounce 0.5s ease;
}

@keyframes zone-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE PROGRESS BAR ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.zone-progress-fill {
  position: relative;
  overflow: hidden;
}

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

@keyframes progress-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Animated progress bar on completion */
.zone-card.completed .zone-progress-fill {
  background: linear-gradient(90deg, #27ae60, #2ecc71, #27ae60);
  background-size: 200% 100%;
  animation: completed-gradient 2s linear infinite;
}

@keyframes completed-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   BOSS INDICATOR ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.zone-boss-indicator {
  animation: boss-pulse 2s ease infinite;
}

@keyframes boss-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.zone-boss-indicator .boss-icon {
  filter: drop-shadow(0 0 5px rgba(231, 76, 60, 0.5));
}

/* Boss available state */
.zone-boss-section.available .boss-card {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.1));
  border: 2px solid rgba(231, 76, 60, 0.5);
  animation: boss-available-pulse 1.5s ease infinite;
}

@keyframes boss-available-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.3); }
  50% { box-shadow: 0 0 25px rgba(231, 76, 60, 0.5); }
}

/* Boss icon large animation */
.boss-icon-large {
  font-size: 3rem;
  animation: boss-menace 3s ease infinite;
}

@keyframes boss-menace {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(1.05) rotate(2deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   COMPLETED BADGE ANIMATION
   ───────────────────────────────────────────────────────────────────────────────── */

.completed-badge {
  animation: badge-pop 0.5s ease;
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ENEMY LIST ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.enemy-row {
  transition: all 0.2s ease;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid transparent;
}

.enemy-row:hover:not(.too-strong) {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #3498db;
  transform: translateX(5px);
}

.enemy-row.too-strong {
  opacity: 0.5;
}

.enemy-sprite-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.enemy-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.fight-enemy-btn {
  transition: all 0.2s ease;
}

.fight-enemy-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(52, 152, 219, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE MODAL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.zone-detail-modal .zone-header {
  position: relative;
  overflow: hidden;
}

.zone-detail-modal .zone-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 31, 51, 0.3) 50%,
    rgba(13, 31, 51, 0.95) 100%
  );
  pointer-events: none;
}

.zone-icon-large {
  font-size: 4rem;
  animation: float-icon 3s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}

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

.zone-meta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.zone-meta span {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   QUEST ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

/* Quest item entrance */
.quest-item {
  animation: quest-slide-in 0.3s ease backwards;
}

.quest-item:nth-child(1) { animation-delay: 0.05s; }
.quest-item:nth-child(2) { animation-delay: 0.1s; }
.quest-item:nth-child(3) { animation-delay: 0.15s; }
.quest-item:nth-child(4) { animation-delay: 0.2s; }
.quest-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes quest-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Quest completion state */
.quest-item.completed:not(.claimed) {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(46, 204, 113, 0.05));
  border-left: 4px solid #27ae60;
  animation: quest-complete-pulse 1.5s ease infinite;
}

@keyframes quest-complete-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
  50% { box-shadow: 0 0 0 5px rgba(39, 174, 96, 0.2); }
}

/* Quest progress bar enhancement */
.quest-progress-bar {
  position: relative;
  overflow: hidden;
}

.quest-progress-bar .progress-fill {
  transition: width 0.5s ease;
}

.quest-item.completed .quest-progress-bar .progress-fill {
  background: linear-gradient(90deg, #27ae60, #2ecc71);
}

/* Claim button pulse */
.claim-quest-btn {
  animation: claim-pulse 1s ease infinite;
}

@keyframes claim-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
  50% { box-shadow: 0 0 0 8px rgba(52, 152, 219, 0.3); }
}

/* Claimed state */
.quest-item.claimed {
  opacity: 0.6;
  background: rgba(0, 0, 0, 0.2);
}

.claimed-badge {
  color: #27ae60;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* In progress indicator */
.in-progress {
  color: #f39c12;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.in-progress::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #f39c12;
  border-radius: 50%;
  animation: progress-dot 1s ease infinite;
}

@keyframes progress-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   QUEST TIMER ENHANCEMENT
   ───────────────────────────────────────────────────────────────────────────────── */

.quest-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 8px;
}

.quest-timer .timer-icon {
  animation: timer-tick 1s ease infinite;
}

@keyframes timer-tick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   QUEST REWARDS ENHANCEMENT
   ───────────────────────────────────────────────────────────────────────────────── */

.quest-rewards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quest-rewards .reward {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.quest-rewards .reward.gold { color: #f1c40f; }
.quest-rewards .reward.xp { color: #3498db; }
.quest-rewards .reward.gems { color: #9b59b6; }

.quest-item.completed:not(.claimed) .quest-rewards .reward {
  animation: reward-glow 1s ease infinite;
}

@keyframes reward-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE REWARDS PREVIEW
   ───────────────────────────────────────────────────────────────────────────────── */

.rewards-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rewards-preview .reward {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.rewards-preview .reward:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ADVENTURE TABS ENHANCEMENT
   ───────────────────────────────────────────────────────────────────────────────── */

.adventure-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.adv-tab {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adv-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.adv-tab.active {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(155, 89, 182, 0.2));
  border-color: #3498db;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   WORLD MAP LEGEND
   ───────────────────────────────────────────────────────────────────────────────── */

.world-map-footer .legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  opacity: 0.8;
}

.legend-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-item .dot.unlocked { background: #3498db; }
.legend-item .dot.current { background: #27ae60; }
.legend-item .dot.completed { background: #d4af37; }
.legend-item .dot.locked { background: #666; }

/* ─────────────────────────────────────────────────────────────────────────────────
   QUEST CLAIM CELEBRATION
   ───────────────────────────────────────────────────────────────────────────────── */

.quest-claim-celebration {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  text-align: center;
  animation: celebration-pop 0.5s ease forwards;
  pointer-events: none;
}

@keyframes celebration-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.celebration-icon {
  font-size: 4rem;
  animation: celebration-bounce 0.5s ease infinite;
}

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

.celebration-rewards {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.celebration-reward {
  font-size: 1.2rem;
  font-weight: bold;
  animation: reward-float 0.5s ease backwards;
}

.celebration-reward:nth-child(1) { animation-delay: 0.1s; }
.celebration-reward:nth-child(2) { animation-delay: 0.2s; }
.celebration-reward:nth-child(3) { animation-delay: 0.3s; }

@keyframes reward-float {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   PLAYER LEVEL BADGE
   ───────────────────────────────────────────────────────────────────────────────── */

.player-level-badge {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(155, 89, 182, 0.2));
  border: 1px solid rgba(52, 152, 219, 0.4);
  border-radius: 20px;
  margin-bottom: 20px;
  font-weight: 500;
}



/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE DIFFICULTY INDICATORS
   ───────────────────────────────────────────────────────────────────────────────── */

.zone-difficulty {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 5px;
  display: inline-block;
}

.zone-difficulty.hard {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
}

.zone-difficulty.easy {
  background: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.4);
}

/* Current zone badge */
.current-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 28px;
  height: 28px;
  background: #27ae60;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  animation: current-badge-pulse 1.5s ease infinite;
}

@keyframes current-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(39, 174, 96, 0.3); }
}

/* Boss defeated indicator */
.boss-defeated {
  position: absolute;
  bottom: -5px;
  right: -5px;
  font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   QUEST JUST CLAIMED ANIMATION
   ───────────────────────────────────────────────────────────────────────────────── */

.quest-item.just-claimed {
  animation: quest-claimed-fade 1.5s ease forwards;
}

@keyframes quest-claimed-fade {
  0% {
    background: rgba(39, 174, 96, 0.3);
  }
  50% {
    transform: scale(1.02);
    background: rgba(39, 174, 96, 0.4);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.98);
    background: rgba(39, 174, 96, 0.1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   CELEBRATION REWARD COLORS
   ───────────────────────────────────────────────────────────────────────────────── */

.celebration-reward.gold {
  color: #f1c40f;
  text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

.celebration-reward.xp {
  color: #3498db;
  text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.celebration-reward.gems {
  color: #9b59b6;
  text-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
}

.celebration-reward.bp {
  color: #e67e22;
  text-shadow: 0 0 10px rgba(230, 126, 34, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ZONE CARD DIFFICULTY OVERLAYS
   ───────────────────────────────────────────────────────────────────────────────── */

.zone-card.hard {
  border-color: rgba(231, 76, 60, 0.5);
}

.zone-card.hard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), transparent);
  pointer-events: none;
  border-radius: inherit;
}

.zone-card.easy {
  border-color: rgba(39, 174, 96, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   STORY TAB ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.story-section {
  padding: 20px;
}

.chapter-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.chapter-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateX(5px);
}

.chapter-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.chapter-card.completed {
  border-color: rgba(39, 174, 96, 0.3);
}

.chapter-card.current {
  border-color: #3498db;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ARENA TAB STYLING
   ───────────────────────────────────────────────────────────────────────────────── */

.arena-section {
  padding: 20px;
  text-align: center;
}

.arena-rank-display {
  padding: 30px;
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(52, 152, 219, 0.1));
  border-radius: 16px;
  margin-bottom: 20px;
}

.arena-rank-icon {
  font-size: 4rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 5px 15px rgba(155, 89, 182, 0.5));
}

.arena-rank-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #d4af37;
  margin-bottom: 5px;
}

.arena-points {
  font-size: 0.9rem;
  opacity: 0.8;
}

.arena-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.arena-btn {
  padding: 15px 30px;
  font-size: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.arena-btn.find-match {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: none;
  animation: find-match-pulse 2s ease infinite;
}

@keyframes find-match-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
  50% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0.3); }
}

.arena-btn:hover {
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   LOADING STATES
   ───────────────────────────────────────────────────────────────────────────────── */

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  font-size: 1.1rem;
  opacity: 0.8;
}

.loading-spinner::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ERROR STATES
   ───────────────────────────────────────────────────────────────────────────────── */

.error-state {
  text-align: center;
  padding: 40px;
  opacity: 0.8;
}

.error-state::before {
  content: "⚠️";
  display: block;
  font-size: 3rem;
  margin-bottom: 15px;
}

.error-state p {
  margin-bottom: 15px;
  color: #e74c3c;
}



/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 6: SUMMON/GACHA SYSTEM UI
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON VIEW LAYOUT
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.summon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.summon-header h2 {
  font-size: 1.8rem;
  color: #d4af37;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.summon-currencies {
  display: flex;
  gap: 15px;
}

.summon-currencies .currency {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON BANNERS
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-banners {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

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

.summon-banner:hover {
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.summon-banner.featured {
  border-color: rgba(255, 215, 0, 0.5);
}

.summon-banner.limited::before {
  content: "LIMITED";
  position: absolute;
  top: 10px;
  right: -30px;
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  color: white;
  padding: 5px 40px;
  font-size: 0.7rem;
  font-weight: bold;
  transform: rotate(45deg);
  z-index: 1;
}

/* Banner Header */
.banner-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.banner-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  animation: banner-icon-float 3s ease-in-out infinite;
}

@keyframes banner-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.banner-title h3 {
  font-size: 1.4rem;
  margin-bottom: 5px;
  color: #fff;
}

.banner-title p {
  font-size: 0.9rem;
  opacity: 0.8;
}

.banner-timer {
  margin-left: auto;
  padding: 8px 15px;
  background: rgba(231, 76, 60, 0.3);
  border: 1px solid rgba(231, 76, 60, 0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: timer-pulse 2s ease infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Featured Item */
.featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  margin-bottom: 15px;
}

.featured-label {
  font-weight: bold;
  color: #f1c40f;
}

.featured-icon {
  font-size: 1.5rem;
}

.featured-name {
  font-weight: bold;
  color: #fff;
}

.featured-rate {
  margin-left: auto;
  color: #2ecc71;
  font-weight: bold;
}

/* Banner Rates */
.banner-rates {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.banner-rates .rate {
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  font-size: 0.85rem;
}

.banner-rates .rate.mythic { color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.5); }
.banner-rates .rate.legendary { color: #ff8c00; border: 1px solid rgba(255, 140, 0, 0.5); }
.banner-rates .rate.epic { color: #9b59b6; border: 1px solid rgba(155, 89, 182, 0.5); }
.banner-rates .rate.rare { color: #3498db; border: 1px solid rgba(52, 152, 219, 0.5); }

/* Pity Info */
.pity-info {
  margin-bottom: 15px;
}

.pity-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

.pity-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #9b59b6, #f39c12);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pity-text {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.pity-label {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Banner Actions */
.banner-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.btn-summon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-summon:hover {
  transform: translateY(-3px);
  border-color: #d4af37;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

.btn-summon.multi {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(52, 152, 219, 0.3));
}

.btn-summon.multi:hover {
  border-color: #9b59b6;
  box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4);
}

.summon-cost {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.summon-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.summon-bonus {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 3px 8px;
  background: #27ae60;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 4px;
}

.banner-stats {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON ANIMATION OVERLAY
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-animation-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: overlay-fade-in 0.3s ease;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.summon-animation {
  text-align: center;
}

.summon-circle {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 30px;
}

.summon-ring {
  position: absolute;
  border: 3px solid;
  border-radius: 50%;
  animation: ring-spin 2s linear infinite;
}

.summon-ring.ring-1 {
  inset: 0;
  border-color: rgba(212, 175, 55, 0.8);
  animation-duration: 3s;
}

.summon-ring.ring-2 {
  inset: 20px;
  border-color: rgba(155, 89, 182, 0.8);
  animation-duration: 2s;
  animation-direction: reverse;
}

.summon-ring.ring-3 {
  inset: 40px;
  border-color: rgba(52, 152, 219, 0.8);
  animation-duration: 1.5s;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.summon-circle .summon-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  animation: icon-pulse 1s ease infinite;
}

@keyframes icon-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

.summon-text {
  font-size: 1.5rem;
  color: #d4af37;
  margin-bottom: 10px;
  animation: text-glow 1s ease infinite;
}

@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
  50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.8); }
}

.summon-count {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON RESULTS OVERLAY
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-results-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  overflow-y: auto;
}

.summon-results {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 20px;
  padding: 30px;
  max-width: 800px;
  width: 100%;
  text-align: center;
  border: 2px solid rgba(212, 175, 55, 0.3);
  animation: results-pop 0.5s ease;
}

@keyframes results-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.summon-results.legendary-pull {
  border-color: rgba(255, 140, 0, 0.8);
  box-shadow: 0 0 50px rgba(255, 140, 0, 0.3);
  animation: legendary-glow 2s ease infinite, results-pop 0.5s ease;
}

@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 140, 0, 0.3); }
  50% { box-shadow: 0 0 60px rgba(255, 140, 0, 0.5); }
}

.summon-results h2 {
  font-size: 2rem;
  color: #d4af37;
  margin-bottom: 25px;
}

/* Results Grid */
.results-grid {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.results-grid.single {
  grid-template-columns: 1fr;
  max-width: 200px;
  margin: 0 auto 20px;
}

.results-grid.multi {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 600px) {
  .results-grid.multi {
    grid-template-columns: repeat(3, 1fr);
  }
}

.result-card {
  padding: 15px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid;
  position: relative;
  overflow: hidden;
  animation: card-reveal 0.5s ease backwards;
  transition: transform 0.2s ease;
}

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

@keyframes card-reveal {
  from { 
    opacity: 0; 
    transform: translateY(20px) rotateX(30deg); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) rotateX(0); 
  }
}

.result-glow {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  pointer-events: none;
}

.result-card.rarity-common { border-color: #888; }
.result-card.rarity-uncommon { border-color: #2ecc71; }
.result-card.rarity-rare { border-color: #3498db; }
.result-card.rarity-epic { border-color: #9b59b6; }
.result-card.rarity-legendary { 
  border-color: #ff8c00; 
  animation: card-reveal 0.5s ease backwards, legendary-card-glow 2s ease infinite;
}
.result-card.rarity-mythic { 
  border-color: #ffd700; 
  animation: card-reveal 0.5s ease backwards, mythic-card-glow 1.5s ease infinite;
}

@keyframes legendary-card-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 140, 0, 0.5); }
  50% { box-shadow: 0 0 25px rgba(255, 140, 0, 0.8); }
}

@keyframes mythic-card-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
  50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.9); }
}

.result-card.rarity-uncommon .result-glow { background: radial-gradient(circle, rgba(46, 204, 113, 0.3), transparent); }
.result-card.rarity-rare .result-glow { background: radial-gradient(circle, rgba(52, 152, 219, 0.3), transparent); }
.result-card.rarity-epic .result-glow { background: radial-gradient(circle, rgba(155, 89, 182, 0.3), transparent); }
.result-card.rarity-legendary .result-glow { background: radial-gradient(circle, rgba(255, 140, 0, 0.4), transparent); }
.result-card.rarity-mythic .result-glow { background: radial-gradient(circle, rgba(255, 215, 0, 0.5), transparent); }

.result-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

.result-name {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-rarity {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.result-rarity.uncommon { color: #2ecc71; }
.result-rarity.rare { color: #3498db; }
.result-rarity.epic { color: #9b59b6; }
.result-rarity.legendary { color: #ff8c00; }
.result-rarity.mythic { color: #ffd700; }

.featured-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.7rem;
  color: #ffd700;
}

/* Results Summary */
.results-summary {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.summary-item {
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
}

.summary-item.uncommon { color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.5); }
.summary-item.rare { color: #3498db; border: 1px solid rgba(52, 152, 219, 0.5); }
.summary-item.epic { color: #9b59b6; border: 1px solid rgba(155, 89, 182, 0.5); }
.summary-item.legendary { color: #ff8c00; border: 1px solid rgba(255, 140, 0, 0.5); }
.summary-item.mythic { color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.5); }

.close-results-btn {
  padding: 15px 50px;
  font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON HISTORY MODAL
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-history-modal {
  max-width: 500px;
}

.summon-history-modal h2 {
  margin-bottom: 20px;
}

.history-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.history-stats .stat-item {
  text-align: center;
}

.history-stats .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #d4af37;
}

.history-stats .stat-label {
  font-size: 0.85rem;
  opacity: 0.7;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.history-entry {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 10px;
}

.entry-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.entry-banner {
  font-weight: bold;
  text-transform: capitalize;
}

.entry-type {
  color: #d4af37;
}

.entry-time {
  opacity: 0.6;
}

.entry-results {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.mini-result {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid;
}

.mini-result.rarity-uncommon { border-color: #2ecc71; }
.mini-result.rarity-rare { border-color: #3498db; }
.mini-result.rarity-epic { border-color: #9b59b6; }
.mini-result.rarity-legendary { border-color: #ff8c00; }
.mini-result.rarity-mythic { border-color: #ffd700; }

.empty-history {
  text-align: center;
  padding: 40px;
  opacity: 0.6;
}

.empty-history .empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON BUTTON IN NAVIGATION
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-nav-btn {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(52, 152, 219, 0.3));
  border: 2px solid rgba(155, 89, 182, 0.5);
  animation: summon-btn-glow 2s ease infinite;
}

@keyframes summon-btn-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(155, 89, 182, 0.3); }
  50% { box-shadow: 0 0 20px rgba(155, 89, 182, 0.5); }
}



/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 6 ENHANCEMENTS - Gacha, Achievements & Settings Polish
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   ENHANCED SUMMON ANIMATION
   ───────────────────────────────────────────────────────────────────────────────── */

/* Particle effects container */
.summon-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.summon-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #d4af37;
  border-radius: 50%;
  animation: particle-float 2s ease-out forwards;
}

@keyframes particle-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0);
  }
}

/* Skip button */
.summon-skip-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: skip-fade-in 1s ease 1s backwards;
}

@keyframes skip-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.summon-skip-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Mythic summon rainbow effect */
.summon-animation.mythic-pull .summon-circle {
  animation: rainbow-glow 2s linear infinite;
}

@keyframes rainbow-glow {
  0% { filter: drop-shadow(0 0 30px #ff0000); }
  16% { filter: drop-shadow(0 0 30px #ff8000); }
  33% { filter: drop-shadow(0 0 30px #ffff00); }
  50% { filter: drop-shadow(0 0 30px #00ff00); }
  66% { filter: drop-shadow(0 0 30px #0080ff); }
  83% { filter: drop-shadow(0 0 30px #8000ff); }
  100% { filter: drop-shadow(0 0 30px #ff0000); }
}

/* Enhanced reveal animation */
.summon-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  animation: reveal-burst 1s ease forwards;
  z-index: 10;
}

@keyframes reveal-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Light rays effect */
.summon-light-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.3) 10deg,
    transparent 20deg
  );
  animation: rays-spin 3s linear infinite;
  pointer-events: none;
}

@keyframes rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Legendary light rays */
.summon-animation.legendary-pull .summon-light-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 140, 0, 0.4) 10deg,
    transparent 20deg
  );
}

/* Mythic light rays */
.summon-animation.mythic-pull .summon-light-rays {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 215, 0, 0.5) 5deg,
    transparent 10deg,
    rgba(138, 43, 226, 0.4) 15deg,
    transparent 20deg
  );
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ENHANCED RESULT CARDS
   ───────────────────────────────────────────────────────────────────────────────── */

.result-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  animation: card-reveal 0.5s ease backwards;
  transition: transform 0.2s ease;
}

.result-card:hover {
  transform: translateY(-5px) scale(1.02);
}

@keyframes card-reveal {
  0% {
    transform: rotateY(90deg) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: rotateY(0) scale(1);
    opacity: 1;
  }
}

/* Rarity-specific card styling */
.result-card.rarity-common {
  border: 2px solid #9e9e9e;
}

.result-card.rarity-uncommon {
  border: 2px solid #4caf50;
}

.result-card.rarity-rare {
  border: 2px solid #2196f3;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.result-card.rarity-epic {
  border: 2px solid #9c27b0;
  box-shadow: 0 0 20px rgba(156, 39, 176, 0.4);
  animation: card-reveal 0.5s ease backwards, epic-pulse 2s ease infinite;
}

@keyframes epic-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(156, 39, 176, 0.4); }
  50% { box-shadow: 0 0 30px rgba(156, 39, 176, 0.6); }
}

.result-card.rarity-legendary {
  border: 2px solid #ff9800;
  box-shadow: 0 0 25px rgba(255, 152, 0, 0.5);
  animation: card-reveal 0.5s ease backwards, legendary-card-pulse 1.5s ease infinite;
}

@keyframes legendary-card-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 40px rgba(255, 152, 0, 0.7);
    transform: scale(1.02);
  }
}

.result-card.rarity-mythic {
  border: 3px solid;
  border-image: linear-gradient(135deg, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #8000ff) 1;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(138, 43, 226, 0.1));
  animation: card-reveal 0.5s ease backwards, mythic-card-pulse 2s ease infinite;
}

@keyframes mythic-card-pulse {
  0%, 100% { 
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(138, 43, 226, 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.7), 0 0 80px rgba(138, 43, 226, 0.5);
    transform: scale(1.03);
  }
}

/* Result card glow effect */
.result-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: glow-rotate 3s linear infinite;
  pointer-events: none;
}

@keyframes glow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Featured badge */
.featured-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  animation: badge-bounce 1s ease infinite;
}

@keyframes badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ACHIEVEMENT ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

/* Achievement card entrance */
.achievement-card {
  animation: achievement-slide-in 0.4s ease backwards;
}

.achievement-card:nth-child(1) { animation-delay: 0.05s; }
.achievement-card:nth-child(2) { animation-delay: 0.1s; }
.achievement-card:nth-child(3) { animation-delay: 0.15s; }
.achievement-card:nth-child(4) { animation-delay: 0.2s; }
.achievement-card:nth-child(5) { animation-delay: 0.25s; }

@keyframes achievement-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Category collapse animation */
.achievement-category .category-achievements {
  transition: all 0.3s ease;
  max-height: 2000px;
  overflow: hidden;
}

.achievement-category.collapsed .category-achievements {
  max-height: 0;
  padding: 0;
  opacity: 0;
}

/* Category header hover */
.category-header {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.category-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.category-header::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  font-size: 0.8rem;
  opacity: 0.5;
}

.achievement-category.collapsed .category-header::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* Category progress bar */
.category-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.category-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #9b59b6);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Achievement unlock animation */
.achievement-card.just-unlocked {
  animation: achievement-unlock 0.8s ease;
}

@keyframes achievement-unlock {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(39, 174, 96, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
}

/* Achievement popup enhancement */
.achievement-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #1a472a, #0d3320);
  border: 2px solid #27ae60;
  border-radius: 16px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 40px rgba(39, 174, 96, 0.4);
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10001;
}

.achievement-popup.show {
  transform: translateX(0);
  opacity: 1;
}

.achievement-popup-icon {
  font-size: 3rem;
  animation: trophy-bounce 0.5s ease infinite;
}

@keyframes trophy-bounce {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.achievement-popup-content h4 {
  color: #27ae60;
  font-size: 0.85rem;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.achievement-popup-content p {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
}

.achievement-popup-points {
  background: #27ae60;
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85rem;
}

/* Confetti particles for achievement */
.achievement-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SETTINGS PANEL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.settings-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #d4af37;
  font-size: 1rem;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-label span {
  color: #fff;
  font-size: 0.95rem;
}

.settings-label small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 50px;
  height: 26px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch.active {
  background: #27ae60;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.toggle-switch.active::after {
  left: 27px;
}

/* Volume slider - compact for settings popup */
.volume-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  max-width: 160px;
}

.volume-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 6px;
  background: linear-gradient(to right, #d4af37 0%, #d4af37 var(--value, 50%), rgba(255, 255, 255, 0.15) var(--value, 50%), rgba(255, 255, 255, 0.15) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.volume-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
}

.volume-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(145deg, #ffd700, #d4af37);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease;
  margin-top: -5px;
}

.volume-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.volume-slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.volume-slider input[type="range"]::-moz-range-progress {
  height: 6px;
  background: #d4af37;
  border-radius: 3px 0 0 3px;
}

.volume-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: linear-gradient(145deg, #ffd700, #d4af37);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.volume-value {
  width: 36px;
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Theme selector */
.theme-options {
  display: flex;
  gap: 10px;
}

.theme-option {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 3px solid transparent;
}

.theme-option:hover {
  transform: scale(1.1);
}

.theme-option.active {
  border-color: #d4af37;
}

.theme-option.dark {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.theme-option.light {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
}

.theme-option.mythic {
  background: linear-gradient(135deg, #2d1f3d, #1a1230);
}

.theme-option.ocean {
  background: linear-gradient(135deg, #0d3b66, #1a5276);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   BANNER ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.summon-banner {
  animation: banner-entrance 0.5s ease backwards;
}

.summon-banner:nth-child(1) { animation-delay: 0.1s; }
.summon-banner:nth-child(2) { animation-delay: 0.2s; }
.summon-banner:nth-child(3) { animation-delay: 0.3s; }

@keyframes banner-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Featured banner shine */
.summon-banner.featured::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  animation: banner-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes banner-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  50%, 100% { transform: translateX(100%) rotate(45deg); }
}

/* Pity bar enhancement */
.pity-bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.pity-fill {
  height: 100%;
  background: linear-gradient(90deg, #e74c3c, #f39c12, #27ae60);
  border-radius: 4px;
  transition: width 0.5s ease;
}

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

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

.pity-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Banner rates enhancement */
.banner-rates {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.banner-rates .rate {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.rate.mythic { 
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.rate.legendary { 
  color: #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.4);
}

.rate.epic { 
  color: #9c27b0;
  border: 1px solid rgba(156, 39, 176, 0.4);
}

.rate.rare { 
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}



/* ─────────────────────────────────────────────────────────────────────────────────
   ACHIEVEMENT CATEGORY ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.category-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.category-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.category-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #9b59b6);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SUMMON BANNER ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  margin: 15px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.featured-label {
  font-weight: bold;
  color: #ffd700;
}

.featured-icon {
  font-size: 1.5rem;
}

.featured-name {
  font-weight: bold;
}

.featured-rate {
  color: #27ae60;
  font-size: 0.9rem;
}

/* Banner header */
.banner-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.banner-icon {
  font-size: 3rem;
}

.banner-title {
  flex: 1;
}

.banner-title h3 {
  margin: 0 0 5px;
  font-size: 1.2rem;
}

.banner-title p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.banner-timer {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 8px;
  color: #e74c3c;
  font-size: 0.85rem;
}

.banner-timer .timer-icon {
  animation: timer-pulse 1s ease infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Banner stats */
.banner-stats {
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 15px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Banner actions */
.banner-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.btn-summon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 15px 25px;
  border-radius: 12px;
  min-width: 120px;
  transition: all 0.3s ease;
}

.btn-summon.single {
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(52, 152, 219, 0.1));
  border: 2px solid rgba(52, 152, 219, 0.5);
}

.btn-summon.multi {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.3), rgba(155, 89, 182, 0.1));
  border: 2px solid rgba(155, 89, 182, 0.5);
}

.btn-summon:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.summon-bonus {
  font-size: 0.7rem;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SETTINGS MODAL ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.settings-modal {
  max-width: 500px;
}

.settings-modal h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #d4af37;
}

.settings-actions {
  display: flex;
  gap: 15px;
  margin: 25px 0;
}

.settings-actions .btn {
  flex: 1;
}

.account-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.account-section .logout-btn {
  width: 100%;
}



/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 7: LEADERBOARD SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   LEADERBOARD VIEW
   ───────────────────────────────────────────────────────────────────────────────── */

.leaderboard-view {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.leaderboard-header {
  text-align: center;
  margin-bottom: 25px;
}

.leaderboard-header h2 {
  font-size: 2rem;
  color: #f1c40f;
  margin-bottom: 5px;
}

.leaderboard-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

/* My Ranks Card */
.my-ranks-card {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.1), rgba(230, 126, 34, 0.1));
  border: 1px solid rgba(241, 196, 15, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.my-ranks-card h3 {
  margin-bottom: 15px;
  color: #f1c40f;
}

.my-ranks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.my-rank-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.my-rank-item:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(241, 196, 15, 0.5);
  transform: translateY(-2px);
}

.rank-position {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.rank-position.top-three {
  font-size: 2rem;
}

.rank-position.top-ten {
  color: #f1c40f;
}

.rank-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 3px;
}

.rank-value {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
}

/* Leaderboard Tabs */
.leaderboard-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.lb-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.lb-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lb-tab.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--tab-color, #f1c40f);
  color: #fff;
}

.tab-icon {
  font-size: 1.2rem;
}

.tab-name {
  font-weight: 500;
}

/* Leaderboard List */
.leaderboard-content {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}

.leaderboard-list {
  max-height: 500px;
  overflow-y: auto;
}

.leaderboard-header-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  font-weight: bold;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  padding: 12px 20px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
  animation: row-slide-in 0.3s ease backwards;
}

@keyframes row-slide-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.leaderboard-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.leaderboard-row.is-me {
  background: rgba(52, 152, 219, 0.2);
  border-left: 3px solid #3498db;
}

.leaderboard-row.top-three {
  background: linear-gradient(90deg, rgba(241, 196, 15, 0.1), transparent);
}

.leaderboard-row.highlighted {
  animation: highlight-pulse 2s ease infinite;
}

@keyframes highlight-pulse {
  0%, 100% { background: rgba(52, 152, 219, 0.2); }
  50% { background: rgba(52, 152, 219, 0.3); }
}

/* Rank Column */
.col-rank {
  font-weight: bold;
}

.rank-badge {
  font-size: 1.5rem;
}

.rank-badge.gold { text-shadow: 0 0 10px rgba(241, 196, 15, 0.5); }
.rank-badge.silver { text-shadow: 0 0 10px rgba(192, 192, 192, 0.5); }
.rank-badge.bronze { text-shadow: 0 0 10px rgba(205, 127, 50, 0.5); }

.rank-number {
  color: rgba(255, 255, 255, 0.6);
}

/* Player Column */
.col-player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3498db, #9b59b6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
}

.player-info {
  display: flex;
  flex-direction: column;
}

.player-name {
  font-weight: bold;
  color: #fff;
}

.player-details {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
}

.god-name {
  color: rgba(255, 255, 255, 0.5);
}

.alliance-tag {
  color: #3498db;
}

/* Value Column */
.col-value {
  text-align: right;
}

.value-number {
  font-size: 1.1rem;
  font-weight: bold;
  color: #f1c40f;
}

/* Separator for distant ranks */
.my-rank-separator {
  text-align: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.5rem;
}

/* Footer */
.leaderboard-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 16px 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.your-rank {
  color: #3498db;
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TUTORIAL SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* No dark background */
  z-index: 100000;
  animation: tutorial-fade-in 0.3s ease;
  pointer-events: none; /* Allow clicks to pass through to elements underneath */
}

@keyframes tutorial-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spotlight Effect - just a highlight border, no darkening */
.tutorial-spotlight {
  position: absolute;
  border-radius: 12px;
  box-shadow: 
    0 0 0 4px rgba(241, 196, 15, 0.9),
    0 0 30px rgba(241, 196, 15, 0.6),
    0 0 60px rgba(241, 196, 15, 0.3);
  border: 3px solid #f1c40f;
  animation: spotlight-pulse 2s ease infinite;
  z-index: 1;
  pointer-events: none; /* Ensure spotlight doesn't block clicks */
  background: transparent;
}

/* Active tutorial target - elevated above overlay */
.tutorial-target-active {
  position: relative !important;
  z-index: 100001 !important;
  cursor: pointer !important;
  animation: target-glow 1s ease infinite !important;
}

@keyframes target-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.8)); }
  50% { filter: drop-shadow(0 0 15px rgba(241, 196, 15, 1)); }
}

@keyframes spotlight-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.9), 0 0 30px rgba(241, 196, 15, 0.6), 0 0 60px rgba(241, 196, 15, 0.3);
  }
  50% { 
    box-shadow: 0 0 0 6px rgba(241, 196, 15, 1), 0 0 50px rgba(241, 196, 15, 0.8), 0 0 80px rgba(241, 196, 15, 0.5);
  }
}

/* Tooltip */
.tutorial-tooltip {
  position: absolute;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #f1c40f;
  border-radius: 16px;
  padding: 25px;
  max-width: 420px;
  min-width: 320px;
  z-index: 2;
  animation: tooltip-pop 0.4s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  pointer-events: auto; /* Tooltip buttons should be clickable */
}

/* Progress Bar */
.tutorial-progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.tutorial-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f1c40f, #e67e22);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.tutorial-progress-text {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes tooltip-pop {
  0% { opacity: 0; transform: scale(0.8) translate(-50%, -50%); }
  100% { opacity: 1; transform: scale(1) translate(-50%, -50%); }
}

.tutorial-tooltip::before {
  content: "";
  position: absolute;
  /* Arrow styling handled by position */
}

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

.tutorial-icon {
  font-size: 2rem;
  animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.tutorial-header h3 {
  font-size: 1.3rem;
  color: #f1c40f;
  margin: 0;
}

.tutorial-message {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 1rem;
}

.tutorial-rewards {
  background: rgba(241, 196, 15, 0.1);
  border: 1px solid rgba(241, 196, 15, 0.3);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rewards-label {
  color: #f1c40f;
  font-weight: bold;
}

.tutorial-rewards .reward {
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}

.tutorial-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.click-hint {
  text-align: center;
  color: #f1c40f;
  font-weight: bold;
  animation: hint-pulse 1.5s ease infinite;
  margin: 0;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.tutorial-continue-btn {
  width: 100%;
  padding: 15px;
  font-size: 1.1rem;
}

.tutorial-skip-btn {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.tutorial-skip-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

/* Progress Indicator */
.tutorial-progress {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.progress-dot.completed {
  background: #f1c40f;
}

.progress-dot.current {
  background: #3498db;
  animation: dot-pulse 1s ease infinite;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .tutorial-tooltip {
    max-width: 90vw;
    min-width: auto;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .leaderboard-header-row,
  .leaderboard-row {
    grid-template-columns: 60px 1fr 80px;
    padding: 10px 15px;
  }
  
  .my-ranks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .leaderboard-tabs {
    flex-wrap: nowrap;
  }
  
  .lb-tab {
    padding: 10px 15px;
  }
  
  .tab-name {
    display: none;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT 8: GUILD RAID SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   RAID TAB LAYOUT
   ───────────────────────────────────────────────────────────────────────────────── */

.raids-tab {
  padding: 15px 0;
}

.raid-status-bar {
  display: flex;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
}

.raid-stat {
  text-align: center;
}

.raid-stat .stat-icon {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 5px;
}

.raid-stat .stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f1c40f;
}

.raid-stat .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   ACTIVE RAIDS
   ───────────────────────────────────────────────────────────────────────────────── */

.raids-section {
  margin-bottom: 25px;
}

.raids-section h4 {
  margin-bottom: 12px;
  color: #f1c40f;
}

.active-raids-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.active-raid-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.1));
  border: 1px solid rgba(231, 76, 60, 0.4);
  border-radius: 12px;
  padding: 15px;
  animation: raid-pulse 3s ease infinite;
}

@keyframes raid-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.2); }
  50% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.4); }
}

.raid-boss-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.3));
}

.raid-info {
  flex: 1;
}

.raid-info h5 {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.difficulty-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

.difficulty-badge.normal { background: #27ae60; }
.difficulty-badge.hard { background: #e67e22; }
.difficulty-badge.mythic { background: #9b59b6; }

.raid-hp-bar {
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}

.raid-hp-bar .hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

.raid-hp-bar .hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.raid-hp-bar.large {
  height: 30px;
}

.raid-hp-bar.large .hp-text {
  font-size: 0.9rem;
}

.raid-meta {
  display: flex;
  gap: 15px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.raid-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raid-actions .btn {
  padding: 8px 16px;
}

.attack-raid-btn {
  animation: attack-ready 1.5s ease infinite;
}

.attack-raid-btn:disabled {
  animation: none;
}

@keyframes attack-ready {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   COMPLETED RAIDS
   ───────────────────────────────────────────────────────────────────────────────── */

.completed-raids-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.completed-raid-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.completed-raid-row .raid-icon {
  font-size: 1.5rem;
}

.completed-raid-row .raid-name {
  flex: 1;
}

.raid-status-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: bold;
}

.raid-status-badge.completed {
  background: rgba(39, 174, 96, 0.3);
  color: #2ecc71;
}

.raid-status-badge.failed {
  background: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   AVAILABLE BOSSES
   ───────────────────────────────────────────────────────────────────────────────── */

.available-bosses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.boss-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.boss-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 196, 15, 0.5);
}

.boss-card.locked {
  opacity: 0.6;
  filter: grayscale(0.5);
}

.boss-card .boss-tier {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: bold;
}

.boss-card.tier-1 { border-color: rgba(46, 204, 113, 0.3); }
.boss-card.tier-2 { border-color: rgba(52, 152, 219, 0.3); }
.boss-card.tier-3 { border-color: rgba(155, 89, 182, 0.3); }
.boss-card.tier-4 { border-color: rgba(241, 196, 15, 0.3); }

.boss-card.tier-1 .boss-tier { color: #2ecc71; }
.boss-card.tier-2 .boss-tier { color: #3498db; }
.boss-card.tier-3 .boss-tier { color: #9b59b6; }
.boss-card.tier-4 .boss-tier { color: #f1c40f; }

.boss-card .boss-icon {
  font-size: 4rem;
  display: block;
  text-align: center;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

.boss-card h5 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.boss-card .boss-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.4;
}

.boss-card .boss-requirements {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 15px;
}

.boss-card .boss-difficulties {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.difficulty-btn {
  padding: 6px 12px !important;
  font-size: 0.75rem !important;
  text-transform: capitalize;
}

.difficulty-btn.normal { background: rgba(39, 174, 96, 0.3); border-color: #27ae60; }
.difficulty-btn.hard { background: rgba(230, 126, 34, 0.3); border-color: #e67e22; }
.difficulty-btn.mythic { background: rgba(155, 89, 182, 0.3); border-color: #9b59b6; }

.difficulty-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.boss-card .lock-reason {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #e74c3c;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RAID SHOP BUTTON
   ───────────────────────────────────────────────────────────────────────────────── */

.raid-shop-btn {
  width: 100%;
  margin-top: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RAID MODALS
   ───────────────────────────────────────────────────────────────────────────────── */

.raid-rewards-modal {
  text-align: center;
}

.raid-rewards-modal h2 {
  margin-bottom: 20px;
  color: #f1c40f;
}

.raid-rewards-modal .rewards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.raid-rewards-modal .reward-item {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  font-size: 1.1rem;
}

.raid-rewards-modal .reward-item.loot {
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.raid-rewards-modal .contribution-note {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.raid-rewards-modal .top-damager-note {
  color: #f1c40f;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Raid Details Modal */
.raid-details-modal {
  max-width: 500px;
}

.raid-details-modal .raid-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.raid-details-modal .boss-icon {
  font-size: 4rem;
}

.raid-details-modal .boss-info h2 {
  margin-bottom: 5px;
}

.raid-details-modal .boss-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.raid-hp-section {
  margin-bottom: 20px;
  text-align: center;
}

.hp-percent {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.raid-mechanics {
  margin-bottom: 20px;
}

.raid-mechanics h4 {
  margin-bottom: 10px;
  color: #e74c3c;
}

.mechanics-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mechanic-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
}

.mechanic-icon {
  font-size: 1.5rem;
}

.mechanic-info strong {
  display: block;
  margin-bottom: 3px;
}

.mechanic-info p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.raid-leaderboard,
.raid-activity {
  margin-bottom: 20px;
}

.raid-leaderboard h4,
.raid-activity h4 {
  margin-bottom: 10px;
}

.damager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.damager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.damager-row.is-me {
  background: rgba(52, 152, 219, 0.2);
  border: 1px solid rgba(52, 152, 219, 0.4);
}

.damager-rank {
  width: 30px;
  text-align: center;
  font-weight: bold;
}

.damager-name {
  flex: 1;
}

.damager-damage {
  color: #e74c3c;
  font-weight: bold;
}

.activity-log {
  max-height: 150px;
  overflow-y: auto;
}

.activity-entry {
  padding: 5px 10px;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-name {
  font-weight: bold;
  margin-right: 5px;
}

.activity-damage {
  color: rgba(255, 255, 255, 0.6);
}

/* Raid Shop Modal */
.raid-shop-modal h2 {
  margin-bottom: 10px;
}

.raid-shop-modal .shop-balance {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.raid-shop-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.shop-item-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-item-card .item-icon {
  font-size: 2.5rem;
}

.shop-item-card .item-info {
  flex: 1;
}

.shop-item-card .item-info h4 {
  margin-bottom: 5px;
}

.shop-item-card .item-info p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 5px;
}

.shop-item-card .item-stats {
  display: flex;
  gap: 10px;
  font-size: 0.75rem;
  color: #2ecc71;
}

.shop-item-card .special-effect {
  display: block;
  font-size: 0.75rem;
  color: #f1c40f;
  margin-top: 3px;
}

.shop-item-card .item-purchase {
  text-align: center;
}

.shop-item-card .item-cost {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .raid-status-bar {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .active-raid-card {
    flex-direction: column;
    text-align: center;
  }
  
  .raid-actions {
    flex-direction: row;
    width: 100%;
  }
  
  .raid-actions .btn {
    flex: 1;
  }
  
  .available-bosses-grid {
    grid-template-columns: 1fr;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════════
   ALLIANCE BUFFS TAB
   ═══════════════════════════════════════════════════════════════════════════════ */

.buffs-tab {
  padding: 15px 0;
}

.buffs-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

.buffs-header p {
  margin: 5px 0;
}

.buffs-info {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.active-buffs-section {
  margin-bottom: 25px;
}

.active-buffs-section h4 {
  color: #f1c40f;
  margin-bottom: 12px;
}

.active-buffs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.active-buff-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.2), rgba(230, 126, 34, 0.1));
  border: 1px solid rgba(241, 196, 15, 0.4);
  border-radius: 12px;
  animation: buff-glow 2s ease infinite;
}

@keyframes buff-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(241, 196, 15, 0.2); }
  50% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.4); }
}

.active-buff-card .buff-icon {
  font-size: 2rem;
}

.active-buff-card .buff-info {
  flex: 1;
}

.active-buff-card .buff-info strong {
  display: block;
  margin-bottom: 3px;
}

.buff-time {
  font-size: 0.85rem;
  color: #f1c40f;
}

.buff-activator {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.available-buffs-section h4 {
  margin-bottom: 12px;
}

.buffs-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.buff-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.buff-card:hover:not(.disabled) {
  border-color: rgba(241, 196, 15, 0.4);
}

.buff-card.disabled {
  opacity: 0.6;
}

.buff-card.active {
  border-color: rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.1);
}

.buff-card .buff-icon {
  font-size: 2.5rem;
}

.buff-card .buff-details {
  flex: 1;
}

.buff-card .buff-details h5 {
  margin-bottom: 5px;
}

.buff-card .buff-details p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}

.buff-cost {
  font-size: 0.8rem;
  color: #f1c40f;
}

.buff-status.active {
  color: #2ecc71;
  font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ALLIANCE ACHIEVEMENTS TAB
   ═══════════════════════════════════════════════════════════════════════════════ */

.achievements-tab {
  padding: 15px 0;
}

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

.achievements-header h4 {
  color: #f1c40f;
}

.achievement-progress {
  padding: 5px 12px;
  background: rgba(241, 196, 15, 0.2);
  border-radius: 15px;
  font-size: 0.85rem;
  color: #f1c40f;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.alliance-achievement-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.alliance-achievement-card.completed {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.3);
}

.alliance-achievement-card.claimable {
  border-color: rgba(241, 196, 15, 0.5);
  animation: claim-pulse 2s ease infinite;
}

@keyframes claim-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(241, 196, 15, 0.2); }
  50% { box-shadow: 0 0 15px rgba(241, 196, 15, 0.4); }
}

.alliance-achievement-card .achievement-icon {
  font-size: 2.5rem;
}

.alliance-achievement-card .achievement-info {
  flex: 1;
}

.alliance-achievement-card .achievement-info h5 {
  margin-bottom: 5px;
}

.alliance-achievement-card .achievement-info p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.alliance-achievement-card .achievement-progress-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.alliance-achievement-card .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f1c40f, #e67e22);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.alliance-achievement-card .progress-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.alliance-achievement-card .achievement-rewards {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  font-size: 0.8rem;
  color: #2ecc71;
}

.alliance-achievement-card .achievement-action {
  min-width: 80px;
  text-align: center;
}

.claimed-badge {
  color: #2ecc71;
  font-weight: bold;
}

.locked-badge {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.2rem;
}

.alliance-stats-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px;
}

.alliance-stats-section h4 {
  margin-bottom: 15px;
  color: #3498db;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.stat-item .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #f1c40f;
  margin-bottom: 5px;
}

.stat-item .stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .alliance-achievement-card {
    flex-direction: column;
    text-align: center;
  }
  
  .alliance-achievement-card .achievement-rewards {
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .buff-card {
    flex-direction: column;
    text-align: center;
  }
}


/* ===========================================
   INTRO CUTSCENE OVERLAY
   =========================================== */
.cutscene-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cutscene-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cutscene-overlay .skip-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  font-family: var(--font-primary);
  font-size: 1rem;
  border-radius: 25px;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInSkip 1s ease 2s forwards;
}

.cutscene-overlay .skip-btn:hover {
  background: rgba(241, 196, 15, 0.3);
  border-color: var(--color-olympus-gold);
  color: var(--color-olympus-gold);
  transform: scale(1.05);
}

.cutscene-overlay .cutscene-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  opacity: 0;
  animation: fadeInSkip 1s ease 3s forwards;
}

@keyframes fadeInSkip {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Cutscene fade out animation */
.cutscene-overlay.fade-out {
  animation: cutsceneFadeOut 1s ease forwards;
}

@keyframes cutsceneFadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .cutscene-overlay .skip-btn {
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
  
  .cutscene-overlay .cutscene-hint {
    bottom: 20px;
    font-size: 0.8rem;
  }
}

/* ===========================================
   INFINITE TOWER STYLES
   =========================================== */
.tower-view {
  padding: var(--space-md);
}

.tower-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-aegean-blue);
}

.tower-title h2 {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tower-subtitle {
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.tower-stats {
  display: flex;
  gap: var(--space-md);
}

.tower-stat {
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
}

.tower-stat .stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-bottom: 2px;
}

.tower-stat .stat-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.tower-attempts {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.attempts-value {
  font-weight: bold;
  color: var(--color-olympus-gold);
  margin-left: var(--space-xs);
}

.attempts-reset {
  color: var(--color-marble-cream);
  opacity: 0.7;
  font-size: 0.85rem;
}

/* Tower Start Panel */
.tower-start-panel {
  text-align: center;
  padding: var(--space-xl);
  background: linear-gradient(to bottom, var(--color-aegean-blue-dark), transparent);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.tower-entrance .tower-icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
  animation: float 3s ease-in-out infinite;
}

.tower-entrance h3 {
  font-size: 1.5rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-sm);
}

.tower-start-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.tower-no-attempts {
  color: var(--color-blood-red);
  margin-top: var(--space-md);
}

/* Tower Active Run */
.tower-active-run {
  padding: var(--space-lg);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-olympus-gold);
  margin-bottom: var(--space-lg);
}

.tower-floor-info {
  text-align: center;
  margin-bottom: var(--space-md);
}

.floor-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.floor-cleared {
  color: var(--color-marble-cream);
  opacity: 0.7;
}

.tower-hp-bar {
  position: relative;
  height: 30px;
  background: var(--color-night-black);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.tower-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blood-red), #c0392b);
  transition: width 0.3s ease;
}

.tower-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.tower-run-rewards {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.tower-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.tower-active-buffs {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-aegean-blue);
  text-align: center;
}

.tower-buff {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-divine-purple);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-xs);
  font-size: 0.85rem;
}

/* Tower Tabs */
.tower-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tower-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border: 1px solid var(--color-aegean-blue);
  border-radius: var(--radius-md);
  color: var(--color-marble-cream);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tower-tab:hover {
  background: var(--color-aegean-blue);
}

.tower-tab.active {
  background: var(--color-olympus-gold-dark);
  border-color: var(--color-olympus-gold);
  color: var(--color-night-black);
}

/* Tower Milestones */
.tower-milestones {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tower-milestone {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-aegean-blue);
  opacity: 0.6;
}

.tower-milestone.reached {
  opacity: 1;
  border-left-color: var(--color-olympus-gold);
}

.tower-milestone.claimed {
  border-left-color: var(--color-divine-purple);
}

.milestone-floor {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
  min-width: 80px;
}

.milestone-info {
  flex: 1;
}

.milestone-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.milestone-rewards {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.milestone-rewards span {
  margin-right: var(--space-sm);
}

.claimed-badge {
  color: var(--color-divine-purple);
  font-weight: bold;
}

/* Tower Leaderboard */
.tower-leaderboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tower-leaderboard .leaderboard-entry {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
}

.tower-leaderboard .entry-rank {
  min-width: 40px;
  font-weight: bold;
}

.tower-leaderboard .entry-name {
  flex: 1;
}

.tower-leaderboard .entry-floor {
  color: var(--color-olympus-gold);
  font-weight: bold;
}

.tower-leaderboard .top-1 {
  background: linear-gradient(90deg, rgba(255,215,0,0.2), transparent);
  border: 1px solid gold;
}

.tower-leaderboard .top-2 {
  background: linear-gradient(90deg, rgba(192,192,192,0.2), transparent);
  border: 1px solid silver;
}

.tower-leaderboard .top-3 {
  background: linear-gradient(90deg, rgba(205,127,50,0.2), transparent);
  border: 1px solid #cd7f32;
}

/* Tower Shop */
.tower-shop .shop-balance {
  text-align: center;
  font-size: 1.3rem;
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.tower-shop .shop-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tower-shop .shop-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-aegean-blue);
}

.tower-shop .shop-item.maxed {
  opacity: 0.5;
}

.tower-shop .item-icon {
  font-size: 2rem;
  margin-right: var(--space-md);
}

.tower-shop .item-info {
  flex: 1;
}

.tower-shop .item-name {
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.tower-shop .item-desc {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.tower-shop .item-cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* Tower Summary Modal */
.tower-summary {
  text-align: center;
  padding: var(--space-lg);
}

.tower-summary h3 {
  font-size: 1.5rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
}

.summary-rewards p {
  margin: var(--space-xs) 0;
  font-size: 1.1rem;
}

.new-record {
  color: var(--color-olympus-gold);
  font-size: 1.3rem;
  margin-top: var(--space-md);
  animation: pulse 1s ease infinite;
}

/* ===========================================
   TERRITORY WAR STYLES
   =========================================== */
.territory-war-view {
  padding: var(--space-md);
}

.tw-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.tw-title h2 {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tw-phase {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.tw-phase.inactive {
  background: var(--color-aegean-blue-dark);
  color: var(--color-marble-cream);
}

.tw-phase.active {
  background: var(--color-blood-red);
  color: white;
  animation: pulse 2s ease infinite;
}

.tw-timer {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold-dark);
  font-weight: bold;
}

.tw-my-alliance {
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-olympus-gold);
  margin-bottom: var(--space-lg);
}

.alliance-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.alliance-tag {
  color: var(--color-olympus-gold);
  font-weight: bold;
}

.alliance-name {
  font-size: 1.2rem;
  font-weight: bold;
}

.alliance-level {
  padding: 2px 8px;
  background: var(--color-divine-purple);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.alliance-war-stats {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  color: var(--color-marble-cream);
  opacity: 0.9;
}

.tw-no-alliance {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

/* Territory War Tabs */
.tw-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tw-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border: 1px solid var(--color-aegean-blue);
  border-radius: var(--radius-md);
  color: var(--color-marble-cream);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tw-tab:hover {
  background: var(--color-aegean-blue);
}

.tw-tab.active {
  background: var(--color-olympus-gold-dark);
  border-color: var(--color-olympus-gold);
  color: var(--color-night-black);
}

/* Territory Map */
.territory-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.territory-tier {
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.tier-title {
  font-size: 1.1rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-aegean-blue);
}

.tier-zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.territory-card {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-night-black);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-aegean-blue);
  transition: all 0.2s ease;
}

.territory-card.owned {
  border-color: var(--color-olympus-gold);
  background: linear-gradient(135deg, rgba(241,196,15,0.1), transparent);
}

.territory-card.contested {
  border-color: var(--color-blood-red);
}

.territory-card.unclaimed {
  border-color: var(--color-aegean-blue);
  opacity: 0.8;
}

.territory-icon {
  font-size: 2.5rem;
  margin-right: var(--space-md);
}

.territory-info {
  flex: 1;
}

.territory-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.territory-owner {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
}

.owner-tag {
  color: var(--color-olympus-gold);
}

.tax-rate {
  margin-left: var(--space-sm);
  padding: 1px 6px;
  background: var(--color-blood-red);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.territory-unclaimed {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.6;
}

.territory-bonus {
  font-size: 0.8rem;
  color: var(--color-divine-purple);
  margin-top: 2px;
}

.war-inactive {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.6;
}

/* Territory Vault */
.territory-vault {
  padding: var(--space-md);
}

.vault-balance {
  text-align: center;
  padding: var(--space-xl);
  background: linear-gradient(to bottom, var(--color-olympus-gold-dark), var(--color-aegean-blue-dark));
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.vault-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
}

.vault-amount {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.vault-desc {
  color: var(--color-marble-cream);
  opacity: 0.8;
  margin-top: var(--space-xs);
}

.vault-territories h3 {
  margin-bottom: var(--space-md);
}

.vault-territory {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}

.vault-territory .t-icon {
  font-size: 1.5rem;
}

.vault-territory .t-name {
  flex: 1;
  font-weight: bold;
}

.vault-territory .t-tax {
  color: var(--color-blood-red);
}

.vault-territory .t-collected {
  color: var(--color-olympus-gold);
}

.vault-actions {
  text-align: center;
  margin-top: var(--space-lg);
}

.vault-note {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
  margin-top: var(--space-xs);
}

/* Territory Settings Modal */
.territory-settings {
  padding: var(--space-md);
}

.territory-settings h4 {
  margin-bottom: var(--space-sm);
}

.tax-slider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.tax-slider input[type="range"] {
  flex: 1;
  height: 8px;
  background: var(--color-aegean-blue);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
}

.tax-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-olympus-gold);
  border-radius: 50%;
  cursor: pointer;
}

#tax-rate-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-olympus-gold);
  min-width: 50px;
}

/* Territory Shop */
.territory-shop .shop-balance {
  text-align: center;
  font-size: 1.3rem;
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.territory-shop .shop-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.territory-shop .shop-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-aegean-blue);
}

.territory-shop .item-icon {
  font-size: 2rem;
  margin-right: var(--space-md);
}

.territory-shop .item-info {
  flex: 1;
}

.territory-shop .item-name {
  font-weight: bold;
  color: var(--color-olympus-gold);
}

.territory-shop .item-desc {
  font-size: 0.85rem;
  color: var(--color-marble-cream);
  opacity: 0.8;
}

.territory-shop .item-cost {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .tower-header, .tw-header {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .tower-stats {
    width: 100%;
    justify-content: space-between;
  }
  
  .tower-attempts {
    flex-direction: column;
    text-align: center;
  }
  
  .tier-zones {
    grid-template-columns: 1fr;
  }
  
  .territory-card {
    flex-wrap: wrap;
  }
  
  .alliance-war-stats {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* Territory Realm Grouping */
.territory-realm {
  margin-bottom: var(--space-lg);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.realm-title {
  font-size: 1.3rem;
  color: var(--color-olympus-gold);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-olympus-gold-dark);
}

.realm-zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.territory-tier-badge {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  background: var(--color-divine-purple);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: bold;
}

.territory-card {
  position: relative;
}

.territory-level {
  font-size: 0.75rem;
  color: var(--color-marble-cream);
  opacity: 0.7;
}

/* Tier zones layout */
.tier-zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.realm-header {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-aegean-blue-dark);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-olympus-gold);
}

.realm-header h3 {
  margin: 0;
  color: var(--color-olympus-gold);
}

/* ===========================================
   SYNERGIES VIEW
   =========================================== */

.synergies-view {
  padding: 1rem;
}

.synergies-summary {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.synergies-summary .stat {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.active-synergies-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.active-synergies-section h3 {
  margin-bottom: 1rem;
  color: #a855f7;
}

.active-synergies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.active-synergy-card {
  background: rgba(139, 92, 246, 0.15);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.active-synergy-card .synergy-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.active-synergy-card .synergy-icon {
  font-size: 1.5rem;
}

.active-synergy-card .synergy-name {
  font-weight: 600;
  color: #a855f7;
}

.active-synergy-card .synergy-bonuses {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.active-synergy-card .synergy-bonus {
  font-size: 0.8rem;
  color: #22c55e;
}

.synergies-filter {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.filter-btn {
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  background: rgba(139, 92, 246, 0.1);
}

.filter-btn.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #a855f7;
}

.synergies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.synergy-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.synergy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.synergy-card.unlocked {
  border-color: rgba(139, 92, 246, 0.4);
}

.synergy-card.locked {
  opacity: 0.7;
}

.synergy-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.synergy-card .synergy-icon {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 10px;
}

.synergy-card .synergy-info {
  flex: 1;
}

.synergy-card .synergy-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.synergy-card .synergy-type {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.synergy-card .unlocked-badge {
  color: #22c55e;
  font-weight: bold;
}

.synergy-card .locked-badge {
  color: var(--text-secondary);
}

.synergy-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.synergy-requirements .req-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  width: 100%;
}

.synergy-requirements .req-item {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

.synergy-requirements .req-item.god {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.synergy-requirements .req-item.equipment {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.synergy-requirements .req-item.set {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.synergy-preview {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.synergy-preview .bonus-preview {
  font-size: 0.85rem;
  color: #22c55e;
}

.synergy-preview .bonus-more {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.synergy-hint {
  text-align: center;
  padding: 0.5rem;
}

.synergy-hint .hint-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Synergy Detail Modal */
.synergy-detail-modal {
  max-width: 500px;
}

.synergy-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 12px 12px 0 0;
  margin: -1rem -1rem 1rem -1rem;
}

.synergy-icon-large {
  font-size: 3rem;
  background: rgba(255,255,255,0.2);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.synergy-header-info h2 {
  margin: 0 0 0.5rem 0;
  color: white;
}

.synergy-header-info p {
  margin: 0;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

.synergy-detail-body {
  padding: 0 1rem;
}

.synergy-detail-body .detail-section {
  margin-bottom: 1.5rem;
}

.synergy-detail-body h3 {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--card-bg);
  border-radius: 6px;
}

.requirement-item.met {
  color: #22c55e;
}

.requirement-item.unmet {
  color: var(--text-secondary);
}

.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bonus-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--card-bg);
  border-radius: 6px;
}

.bonus-item .bonus-stat {
  color: var(--text-primary);
}

.bonus-item .bonus-value {
  font-weight: 600;
}

.bonus-item .bonus-value.positive {
  color: #22c55e;
}

.bonus-item .bonus-value.negative {
  color: #ef4444;
}

.synergy-lore {
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 600px) {
  .synergies-grid {
    grid-template-columns: 1fr;
  }
  
  .active-synergies-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FARMING / AUTO-BATTLE VIEW
   ═══════════════════════════════════════════════════════════════════════════════ */

.farming-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.farming-view .view-header {
  text-align: center;
  margin-bottom: 20px;
}

.farming-view .view-header h2 {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 5px;
}

.farming-view .view-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Energy Bar */
.energy-section {
  margin-bottom: 20px;
}

.energy-bar-container {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 15px;
  border-radius: 10px;
}

.energy-bar {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.energy-text {
  color: #4ade80;
  font-weight: 600;
  min-width: 100px;
  text-align: right;
}

/* Active Farming Panel */
.active-farming-panel {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 25px;
}

.farming-zone-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.zone-icon-large {
  font-size: 3rem;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.farming-zone-header .zone-info {
  flex: 1;
}

.farming-zone-header .zone-info h3 {
  color: #22c55e;
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.preset-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.farming-timer {
  text-align: right;
}

.farming-timer .time-elapsed {
  display: block;
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 600;
}

.farming-timer .battle-speed {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Pending Rewards Display */
.pending-rewards-display {
  margin-bottom: 20px;
}

.pending-rewards-display h4 {
  color: var(--gold);
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.reward-item {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
}

.reward-item .reward-icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.reward-item .reward-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.reward-item .reward-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Stage Progress */
.stage-progress {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

.stage-progress .stage-label {
  display: block;
  color: var(--gold);
  margin-bottom: 8px;
}

.stage-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

.stage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f59e0b);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.stage-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stage-complete {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  padding: 15px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 20px;
}

/* Farming Actions */
.farming-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.farming-actions .btn-large {
  padding: 15px 40px;
  font-size: 1.1rem;
}

/* Zone Selection Panel */
.zone-selection-panel {
  margin-bottom: 25px;
}

.zone-selection-panel h3 {
  color: var(--gold);
  margin-bottom: 15px;
}

/* Preset Selection */
.preset-selection {
  margin-bottom: 20px;
}

.preset-selection label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.preset-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.preset-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.preset-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary);
  color: #fff;
}

/* Zones Farming Grid */
.zones-farming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}

.zone-farming-card {
  background: rgba(30, 58, 95, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.zone-farming-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.zone-farming-card.selected {
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.1);
}

.zone-farming-card.completed {
  border-color: rgba(34, 197, 94, 0.5);
}

.zone-farming-card.current::before {
  content: '📍 Current';
  position: absolute;
  top: -10px;
  right: 10px;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
}

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

.zone-card-header .zone-icon {
  font-size: 2rem;
}

.zone-card-header .zone-card-info {
  flex: 1;
}

.zone-card-header h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 2px;
}

.zone-card-header .zone-level {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.zone-stars {
  display: flex;
  gap: 2px;
}

.zone-stars .star {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.2);
}

.zone-stars .star.earned {
  color: var(--gold);
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.zone-card-rewards {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.zone-card-progress {
  margin-bottom: 12px;
}

.mini-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.mini-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Locked Zones */
.locked-zones {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.locked-zones h4 {
  color: var(--text-muted);
  margin-bottom: 15px;
}

.locked-zones-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.locked-zone-item {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.locked-zone-item .unlock-req {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Quick Battle Section */
.quick-battle-section {
  background: rgba(30, 58, 95, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin-top: 25px;
}

.quick-battle-section h3 {
  color: var(--gold);
  margin-bottom: 5px;
}

.quick-battle-section .section-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.enemies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.enemy-battle-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: all 0.2s ease;
}

.enemy-battle-card:hover:not(.too-strong) {
  background: rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.enemy-battle-card.too-strong {
  opacity: 0.5;
}

.enemy-battle-card .enemy-sprite {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.enemy-battle-card .enemy-sprite img {
  max-height: 60px;
  max-width: 60px;
}

.enemy-icon-large {
  font-size: 2.5rem;
}

.enemy-battle-card .enemy-info h5 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.enemy-battle-card .enemy-level {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.enemy-battle-card .enemy-rewards {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Offline Rewards Section */
.offline-rewards-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-top: 25px;
}

.offline-rewards-section h3 {
  color: #a78bfa;
  margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .rewards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .zones-farming-grid {
    grid-template-columns: 1fr;
  }

  .preset-buttons {
    justify-content: center;
  }

  .farming-actions {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ICON SYSTEM STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Game Icons */
.game-icon {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.icon-tiny { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* Icon fallbacks (when images fail to load) */
.icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.icon-fallback.icon-tiny { font-size: 12px; }
.icon-fallback.icon-sm { font-size: 16px; }
.icon-fallback.icon-md { font-size: 20px; }
.icon-fallback.icon-lg { font-size: 28px; }
.icon-fallback.icon-xl { font-size: 40px; }

/* Currency Display */
.currency-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.currency-display .currency-amount {
  font-weight: 600;
}

/* God Portraits - Rectangular Style */
.god-portrait.god-small,
.god-portrait.god-medium,
.god-portrait.god-large,
.god-portrait.god-xlarge {
  border-radius: 4px;
  border: 2px solid var(--gold, var(--color-olympus-gold));
  object-fit: cover;
}

.god-portrait.god-small { width: 32px; height: 40px; }
.god-portrait.god-medium { width: 48px; height: 60px; }
.god-portrait.god-large { width: 64px; height: 80px; }
.god-portrait.god-xlarge { width: 96px; height: 120px; }

.god-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid var(--gold, var(--color-olympus-gold));
  font-size: 24px;
}

/* Enemy Portraits */
.enemy-portrait {
  border-radius: 8px;
  object-fit: contain;
  background: rgba(139, 0, 0, 0.2);
}

.enemy-portrait.enemy-small { width: 32px; height: 32px; }
.enemy-portrait.enemy-medium { width: 48px; height: 48px; }
.enemy-portrait.enemy-large { width: 64px; height: 64px; }

.enemy-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Equipment Icons */
.equipment-icon {
  border-radius: 6px;
  object-fit: contain;
}

.equipment-icon.equip-small { width: 28px; height: 28px; }
.equipment-icon.equip-medium { width: 40px; height: 40px; }
.equipment-icon.equip-large { width: 56px; height: 56px; }

.equip-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Rank Icons in Leaderboards/PvP */
.rank-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Action card icons alignment */
.action-card .action-icon,
.secondary-action-card .action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-card .action-icon .game-icon,
.secondary-action-card .action-icon .game-icon {
  width: 32px;
  height: 32px;
}

/* Reward displays with icons */
.reward-item .game-icon,
.reward .game-icon {
  margin-right: 4px;
}

/* Enemy rewards in zone modal */
.enemy-rewards {
  display: flex;
  align-items: center;
  gap: 8px;
}

.enemy-rewards .game-icon {
  margin-right: 2px;
}

/* ===========================================
   VIEWPORT CONSTRAINT OVERRIDES
   Ensure content never exceeds viewport
   =========================================== */

/* Force all screens to respect viewport height */
.screen {
  max-height: 100vh;
  overflow: hidden;
}

/* Ensure scrollable containers work within viewport */
.view,
[class*="-view"] {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Prevent content from pushing beyond screen */
.game-content > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Scale down content on smaller viewports */
@media (max-height: 700px) {
  .quick-actions {
    gap: var(--space-sm);
  }
  
  .action-card {
    padding: var(--space-md);
  }
  
  .action-card .action-icon {
    font-size: 1.5rem;
  }
  
  .secondary-action-card {
    padding: var(--space-sm) var(--space-md);
  }
  
  .view-header h2 {
    font-size: 1.25rem;
  }
  
  .view-subtitle {
    font-size: 0.85rem;
  }
}

@media (max-height: 600px) {
  .quick-actions {
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }
  
  .action-card {
    padding: var(--space-sm);
  }
  
  .secondary-actions {
    gap: var(--space-xs);
  }
  
  .game-header {
    padding: var(--space-sm);
  }
  
  .player-avatar {
    width: 36px;
    height: 36px;
  }
}

/* Ensure modals and overlays fit viewport */
.modal-content,
.tutorial-tooltip {
  max-height: 90vh;
  overflow-y: auto;
}