/* ============================================
   CSS Custom Properties (Design System)
   RavenQuest Game-Matched Theme
   ============================================ */
:root {
  /* Panel Backgrounds - Dark Slate (Game-Matched) */
  --game-bg-darkest: #0d0d0f;
  --game-bg-dark: #1a1a1e;
  --game-bg-base: #252529;
  --game-bg-light: #2f2f35;
  --game-bg-hover: #3a3a42;

  /* Borders - Bronze/Gold Frame Effect */
  --game-border-dark: #2a2520;
  --game-border-bronze: #5c4a32;
  --game-border-gold: #8b7340;
  --game-border-bright: #c9a84c;

  /* Text Colors - Warm Cream/Gold */
  --game-text-white: #e8e4dc;
  --game-text-cream: #d4c8a8;
  --game-text-gold: #d4a84c;
  --game-text-muted: #9a9488; /* Improved contrast: 4.5:1 on dark bg */
  --game-text-green: #4caf50;
  --game-text-red: #e57373;
  --game-text-blue: #64b5f6;
  --game-text-purple: #b39ddb;

  /* Accent Colors */
  --game-gold: #c9a84c;
  --game-gold-bright: #e8c84c;
  --game-bronze: #8b6914;

  /* Legacy mappings for compatibility */
  --color-primary: var(--game-gold);
  --color-primary-light: var(--game-gold-bright);
  --color-accent: var(--game-gold);
  --color-gold: var(--game-gold-bright);

  /* Background mappings */
  --bg-dark: var(--game-bg-dark);
  --bg-darker: var(--game-bg-darkest);
  --bg-medium: var(--game-bg-base);
  --bg-card: rgba(37, 37, 41, 0.95);
  --bg-card-hover: rgba(47, 47, 53, 0.95);
  --bg-overlay: rgba(13, 13, 15, 0.9);
  --bg-overlay-dark: rgba(13, 13, 15, 0.95);

  /* Text mappings */
  --text-primary: var(--game-text-white);
  --text-secondary: var(--game-text-cream);
  --text-muted: var(--game-text-muted);
  --text-dim: #8a8478; /* Improved contrast */
  --text-disabled: #6a6860; /* Improved contrast */

  /* Border mappings */
  --border-subtle: var(--game-border-dark);
  --border-light: var(--game-border-bronze);
  --border-gold: var(--game-border-gold);
  --border-gold-bright: var(--game-border-bright);

  /* Trophy Tier Colors */
  --tier-base: #c0c0c0;
  --tier-golden: var(--game-gold-bright);
  --tier-enchanted: var(--game-text-purple);

  /* Status Colors */
  --color-success: var(--game-text-green);
  --color-warning: var(--game-gold);
  --color-error: var(--game-text-red);
  --color-error-bg: #ffdede;
  --color-success-bg: #d9ffe9;

  /* Additional Accent Colors */
  --game-orange: #e67e22;
  --game-bg-purple: #2d2d44;
  --game-gold-dark: #8b6914;
  --game-gold-light: #e6c65c;
  --game-bg-warm: #5d4037;
  --game-bg-taupe: #5C4A3D;
  --game-bg-taupe-hover: #6D5A4D;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Border Radius - Minimal for game feel */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  /* Virtual Scroll Item Height (must sync with cosmetics.js) */
  --cosmetic-item-height: 145px;
  --cosmetic-item-gap: 8px;
  --cosmetic-slot-height: 153px; /* item + gap - tall enough for 2 rows of materials */

  /* Font Sizes */
  --font-xs: 10px;
  --font-sm: 11px;
  --font-base: 12px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-2xl: 20px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* Shadows - Game panel effect */
  --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-glow: 0 0 8px rgba(201, 168, 76, 0.3);
  --shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.5);

  /* Font Size Aliases (for compatibility) */
  --font-size-xs: var(--font-xs);
  --font-size-sm: var(--font-sm);
  --font-size-base: var(--font-base);
  --font-size-md: var(--font-md);
  --font-size-lg: var(--font-lg);
  --font-size-xl: var(--font-xl);

  /* Additional Variable Aliases */
  --bg-hover: var(--game-bg-hover);
  --color-primary-dark: rgba(201, 168, 76, 0.3);
  --color-text-muted: var(--text-muted);

  /* Grid Tile Colors (Land Simulator) */
  --tile-farmland: #5C4A3D;
  --tile-house: #6B7280;
  --tile-door: rgba(139, 90, 43, 0.9);
  --tile-clearance: rgba(239, 68, 68, 0.4);
  --tile-crop-1x1-bg: rgba(251, 191, 36, 0.25);
  --tile-crop-1x1-border: #FBBF24;
  --tile-crop-2x2-bg: rgba(59, 130, 246, 0.25);
  --tile-crop-2x2-border: #3B82F6;
  --tile-crop-3x3-bg: rgba(168, 85, 247, 0.25);
  --tile-crop-3x3-border: #A855F7;
}

/* 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;
  }
}

/* ============================================
   Reset & Base Styles
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: transparent;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: transparent;
  color: var(--game-text-cream);
  height: 100vh;
  overflow: hidden;
  font-size: var(--font-base);
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--game-bg-dark);
  border: 2px solid var(--game-border-dark);
  box-shadow: 
    inset 0 0 0 1px var(--game-border-bronze),
    inset 0 0 0 2px var(--game-border-gold),
    var(--shadow-panel);
}

/* ============================================
   Navigation - Game Panel Header Style
   ============================================ */
.top-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, var(--game-bg-base) 0%, var(--game-bg-dark) 100%);
  border-bottom: 1px solid var(--game-border-bronze);
  -webkit-app-region: drag;
}

.nav-logo {
  height: 32px;
  width: auto;
  margin-right: var(--space-2);
  filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.5));
  -webkit-app-region: no-drag;
  cursor: default;
}

.tab-button {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--game-border-bronze);
  background: linear-gradient(180deg, var(--game-bg-light) 0%, var(--game-bg-base) 100%);
  color: var(--game-text-cream);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-sm);
  letter-spacing: 0.3px;
  transition: all var(--transition-normal);
  -webkit-app-region: no-drag;
}

.tab-button:hover {
  border-color: var(--game-border-gold);
  color: var(--game-text-gold);
  background: linear-gradient(180deg, var(--game-bg-hover) 0%, var(--game-bg-light) 100%);
}

.tab-button:active {
  transform: scale(0.97);
}

.tab-button.active {
  background: linear-gradient(180deg, var(--game-bg-base) 0%, var(--game-bg-dark) 100%);
  border-color: var(--game-border-bright);
  color: var(--game-gold-bright);
  box-shadow: inset 0 1px 0 rgba(201, 168, 76, 0.2);
  border-bottom: 2px solid var(--game-gold-bright);
}

.tab-button.disabled,
.tab-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--text-disabled);
}

.tab-button.disabled:hover,
.tab-button:disabled:hover {
  border-color: var(--game-border-bronze);
  color: var(--text-disabled);
  background: linear-gradient(180deg, var(--game-bg-light) 0%, var(--game-bg-base) 100%);
}

.no-drag {
  -webkit-app-region: no-drag;
}

.spacer {
  flex: 1;
}

/* Settings button in nav */
.settings-btn {
  padding: var(--space-2);
  border: 1px solid var(--game-border-bronze);
  background: var(--game-bg-base);
  color: var(--game-text-cream);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-md);
  transition: all var(--transition-normal);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.settings-btn:hover {
  border-color: var(--game-border-bright);
  color: var(--game-gold);
}

.opacity-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--game-text-cream);
  font-size: var(--font-sm);
}

.opacity-control input[type='range'] {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
}

.opacity-control input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--game-gold);
  border: 1px solid var(--game-border-bright);
  border-radius: 50%;
  cursor: pointer;
}

/* Reset Countdown */
.reset-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  transition: all var(--transition-normal);
}

.countdown-label {
  opacity: 0.7;
}

.countdown-value {
  font-family: 'Courier New', monospace;
  color: var(--game-text-cream);
  font-weight: 600;
}

.countdown-urgent {
  border-color: var(--game-text-red);
  animation: countdown-pulse 1s ease-in-out infinite;
}

.countdown-urgent .countdown-value {
  color: var(--game-text-red);
}

@keyframes countdown-pulse {
  0%, 100% {
    background: var(--game-bg-darkest);
  }
  50% {
    background: rgba(231, 76, 60, 0.2);
  }
}

/* ============================================
   Dashboard Header
   ============================================ */
.dashboard-header {
  background: var(--game-bg-darkest);
  border-bottom: 1px solid var(--game-border-bronze);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.dashboard-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-right: var(--space-4);
  border-right: 1px solid var(--game-border-bronze);
}

.dashboard-logo {
  height: 96px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(201, 168, 76, 0.5));
}

.dashboard-tagline {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  font-style: italic;
}

.stat-group {
  display: flex;
  gap: var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 140px;
}

.stat-label {
  font-size: var(--font-sm);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--color-accent);
}

.stat-detail {
  font-size: var(--font-base);
  color: var(--text-muted);
}

/* ============================================
   Tab States
   ============================================ */
.tab-button:focus-visible,
.trophy-sub-tab:focus-visible,
.trophy-checkbox:focus-visible,
.cosmetic-tab:focus-visible,
.category-tab:focus-visible,
.palette-item:focus-visible,
.optimized-layout-card:focus-visible,
.btn-icon:focus-visible,
.btn-small:focus-visible,
.btn-secondary:focus-visible,
.saved-layout:focus-visible,
.land-checkbox:focus-visible,
.nft-input:focus-visible,
.settings-select:focus-visible,
.settings-input:focus-visible,
select:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.tab-section {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-section.active {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Allow the entire tab section to scroll */
  animation: tabFadeIn var(--transition-slow) ease-out;
}

/* Tab content fade-in animation */
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Layout
   ============================================ */
.container {
  display: flex;
  height: calc(100vh - 58px);
  overflow: hidden;
}

.trophy-list {
  flex: 1;
  min-width: 0;
  padding: var(--space-5);
  overflow-y: auto;
  overflow-x: hidden;
}

.trophy-list h1 {
  font-size: var(--font-2xl);
  margin-bottom: var(--space-5);
  color: var(--color-gold);
  text-shadow: var(--shadow-text);
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}

.primary-btn {
  padding: var(--space-2) 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.15));
  color: var(--bg-dark);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* ============================================
   Trophy Sub-Tabs
   ============================================ */
.trophy-sub-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--border-subtle);
}

.trophy-sub-tab {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all var(--transition-normal);
}

.trophy-sub-tab:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.25);
}

.trophy-sub-tab.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ============================================
   Cosmetic Tabs
   ============================================ */
.cosmetic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.cosmetic-tab {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all var(--transition-normal);
  white-space: nowrap;
  -webkit-app-region: no-drag;
}

.cosmetic-tab:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.25);
}

.cosmetic-tab.active {
  background: rgba(212, 160, 23, 0.15);
  border-color: var(--game-gold);
  color: var(--game-gold);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

/* Results count display */
.results-count {
  font-size: var(--font-sm);
  color: var(--game-text-muted);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-2);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 150px;
  min-width: 0;
}

.filter-group label {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--game-text-cream);
  text-transform: none;
  letter-spacing: normal;
}

.filter-group select,
.filter-group input {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--game-text-cream);
  font-size: var(--font-base);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-group select:hover,
.filter-group input:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.filter-group select:focus,
.filter-group input:focus {
  outline: 2px solid var(--game-gold);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--game-gold-bright);
}

.filter-group select:focus:not(:focus-visible),
.filter-group input:focus:not(:focus-visible) {
  outline: none;
}

.filter-group select option {
  background: var(--game-bg-purple);
  color: var(--game-text-cream);
}

.trophy-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.trophy-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}

.trophy-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.trophy-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.trophy-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.trophy-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--game-text-white);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.trophy-item:hover .trophy-name {
  overflow: visible;
  max-width: none;
}

.trophy-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-sm);
  color: var(--game-text-muted);
}

.trophy-creature {
  color: var(--game-orange);
  font-weight: 500;
}

.trophy-family {
  color: var(--game-text-green);
  font-weight: 500;
  font-style: italic;
}

.trophy-bonus {
  color: var(--game-text-blue);
}

/* Separator dot between trophy detail items */
.trophy-details > span:not(:last-child)::after {
  content: "•";
  margin-left: var(--space-3);
  color: var(--game-text-muted);
  opacity: 0.5;
}

.trophy-checkboxes {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 65px;
}

.checkbox-label {
  font-size: var(--font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.checkbox-label.base {
  color: var(--tier-base);
}

.checkbox-label.enchanted {
  color: var(--tier-enchanted);
}

.checkbox-label.golden {
  color: var(--tier-golden);
}

.trophy-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 2px solid;
  border-radius: var(--radius-sm);
  position: relative;
  transition: all var(--transition-normal);
}

.trophy-checkbox.base {
  border-color: var(--tier-base);
}

.trophy-checkbox.base:checked {
  background-color: var(--tier-base);
  border-color: var(--tier-base);
}

.trophy-checkbox.enchanted {
  border-color: var(--tier-enchanted);
}

.trophy-checkbox.enchanted:checked {
  background-color: var(--tier-enchanted);
  border-color: var(--tier-enchanted);
}

.trophy-checkbox.golden {
  border-color: var(--tier-golden);
}

.trophy-checkbox.golden:checked {
  background-color: var(--tier-golden);
  border-color: var(--tier-golden);
}

.trophy-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bg-dark);
  font-size: var(--font-md);
  font-weight: bold;
}

/* Track button for hunting targets */
.track-btn {
  background: transparent;
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-base);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.6;
}

.track-btn:hover {
  opacity: 1;
  border-color: var(--game-border-gold);
  background: rgba(201, 168, 76, 0.1);
}

.track-btn.tracked {
  opacity: 1;
  border-color: var(--game-gold);
  background: rgba(201, 168, 76, 0.2);
}

.track-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ============================================
   Stat Panel
   ============================================ */
.stat-panel {
  flex: 0 0 250px;
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid var(--border-subtle);
  padding: var(--space-3);
  overflow-y: auto;
  min-width: 0;
}

.stat-panel h2 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-2);
  color: var(--color-gold);
  text-align: center;
}

.stat-panel h3 {
  font-size: var(--font-sm);
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-1);
}

.tier-totals {
  margin-bottom: var(--space-8);
}

.tier-count {
  display: grid;
  grid-template-columns: 100px 60px 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-base);
}

/* Progress bar for tier counts */
.tier-progress {
  height: 6px;
  background: var(--game-bg-darkest);
  border-radius: 3px;
  overflow: hidden;
}

.tier-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

.tier-progress-bar.base {
  background: linear-gradient(90deg, var(--tier-base), #8b7355);
}

.tier-progress-bar.golden {
  background: linear-gradient(90deg, var(--tier-golden), #e8c84c);
}

.tier-progress-bar.enchanted {
  background: linear-gradient(90deg, var(--tier-enchanted), #ce93d8);
}

.tier-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-sm);
}

.tier-label.base {
  color: var(--tier-base);
}

.tier-label.enchanted {
  color: var(--tier-enchanted);
}

.tier-label.golden {
  color: var(--tier-golden);
}

.rewards-totals {
  margin-top: var(--space-8);
}

.reward-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--font-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-label {
  color: var(--game-text-muted);
}

.reward-row span:last-child:not(.max-renown) {
  color: var(--game-text-green);
  font-weight: 600;
}

.max-renown {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
  font-weight: normal;
  margin-left: 4px;
}

/* Category Breakdown */
.category-breakdown {
  margin-top: 20px;
}

.category-breakdown h3 {
  font-size: var(--font-sm);
  color: var(--game-text-gold);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--game-border-dark);
  padding-bottom: var(--space-1);
}

.category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--font-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.category-name {
  color: var(--game-text-cream);
  flex: 1;
}

.category-count {
  color: var(--game-text-muted);
  min-width: 50px;
  text-align: center;
}

.category-renown {
  color: var(--game-gold);
  font-weight: 600;
  min-width: 80px;
  text-align: right;
}

.category-row.complete .category-name {
  color: var(--game-text-green);
}

.category-row.complete .category-count {
  color: var(--game-text-green);
}

.stat-bonuses {
  margin-top: 20px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--font-base);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-name {
  color: var(--game-text-muted);
}

.stat-value {
  color: var(--game-text-blue);
  font-weight: 600;
}

.stat-value.has-bonus {
  color: var(--game-text-green);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.empty-message {
  padding: 40px 20px;
  text-align: center;
  color: var(--game-text-muted);
  font-size: 16px;
  margin-top: 20px;
}

/* Cosmetics layout */
.cosmetics-container {
  display: flex;
  gap: var(--space-4);
  height: calc(100vh - 58px);
}

.cosmetics-list {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.cosmetics-list h1 {
  font-size: var(--font-2xl);
  margin-bottom: 12px;
  color: var(--game-gold-bright);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.cosmetic-items {
  display: block;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  position: relative;
}

.virtual-scroll-content {
  position: relative;
  width: 100%;
}

.cosmetic-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: start;
  gap: var(--space-3);
  height: var(--cosmetic-item-height); /* Fixed height for virtual scroll */
  box-sizing: border-box;
  overflow: hidden;
  position: relative; /* For absolute positioned children */
}

.cosmetic-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(212, 160, 23, 0.3);
  flex-shrink: 0;
  align-self: center;
}

.cosmetic-info {
  flex: 1;
  min-width: 0;
  overflow: visible; /* Allow progress-text to show above */
  position: relative;
}

.cosmetic-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--game-text-white);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cosmetic-meta {
  font-size: 12px;
  color: var(--game-text-muted);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Renown row with inline progress bar */
.cosmetic-renown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cosmetic-renown {
  font-size: 12px;
  color: var(--game-text-green);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inline progress bar (next to renown) */
.progress-bar.inline {
  flex: 1;
  height: 6px;
  max-width: 120px;
  margin-bottom: 0;
  position: relative;
}

.progress-bar.inline .progress-text {
  position: absolute;
  right: 0;
  top: -12px;
  font-size: var(--font-xs);
}

.cosmetic-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 52px; /* ~2 rows of material pills */
  overflow: hidden;
}

.material-pill {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--game-text-cream);
  white-space: nowrap;
}

.material-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.material-row input[type='number'],
.material-pill input[type='number'] {
  width: 50px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  flex-shrink: 0;
}

/* Material pill with image */
.material-pill-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.material-pill-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cosmetic-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 90px;
  justify-content: flex-end;
  color: var(--game-text-cream);
  font-size: 12px;
  flex-shrink: 0;
  align-self: center;
}

.cosmetic-actions label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.cosmetic-actions input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--game-gold);
}

.cosmetics-panel {
  width: 280px;
  flex-shrink: 0;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 900; /* Below settings overlay */
}

.spinner {
  width: 36px;
  height: 36px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--game-gold-bright);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 16px rgba(232, 200, 76, 0.4);
}

.loading-logo {
  max-width: 200px;
  height: auto;
  margin-bottom: var(--space-2);
  animation: logoFadeIn 0.5s ease-out;
  filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4));
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.loading-text {
  color: var(--game-text-cream);
  font-weight: 600;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Skeleton Loading States
   ============================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--game-bg-darkest) 25%,
    var(--game-bg-darker) 50%,
    var(--game-bg-darkest) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

/* Trophy skeleton item */
.skeleton-trophy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  height: 72px;
  background: var(--game-bg-darker);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-trophy-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.skeleton-trophy-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-trophy-title {
  height: 16px;
  width: 60%;
}

.skeleton-trophy-desc {
  height: 12px;
  width: 40%;
}

.skeleton-trophy-checks {
  display: flex;
  gap: var(--space-2);
}

.skeleton-trophy-check {
  width: 50px;
  height: 24px;
}

/* Cosmetic skeleton item */
.skeleton-cosmetic {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-2);
  height: 100px;
  background: var(--game-bg-darker);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-cosmetic-img {
  width: 48px;
  height: 48px;
}

.skeleton-cosmetic-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-cosmetic-title {
  height: 16px;
  width: 70%;
}

.skeleton-cosmetic-meta {
  height: 12px;
  width: 50%;
}

.skeleton-cosmetic-bar {
  height: 8px;
  width: 100%;
  margin-top: auto;
}

/* Creature skeleton item */
.skeleton-creature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  height: 74px;
  background: var(--game-bg-darker);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-creature-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.skeleton-creature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.skeleton-creature-title {
  height: 16px;
  width: 55%;
}

.skeleton-creature-desc {
  height: 12px;
  width: 35%;
}

#toastContainer {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1100;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.9);
  color: var(--game-text-cream);
  padding: 10px 12px 10px 36px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  position: relative;
}

.toast::before {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

.toast-info {
  border-color: var(--game-text-blue);
}
.toast-info::before {
  content: 'ℹ';
  color: var(--game-text-blue);
}
.toast-error {
  border-color: var(--color-error);
  color: var(--color-error-bg);
}
.toast-error::before {
  content: '✕';
  color: var(--color-error);
}
.toast-success {
  border-color: var(--game-text-green);
  color: var(--color-success-bg);
}
.toast-success::before {
  content: '✓';
  color: var(--game-text-green);
}

.toast-exit {
  opacity: 0;
  transform: translateY(-6px);
}

/* Shared progress bar styling (used in cosmetics) */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 2px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--game-bronze), var(--game-gold));
  width: 0%;
  transition: width 0.2s ease;
}

.progress-text {
  position: absolute;
  right: 0;
  top: -12px;
  font-size: var(--font-xs);
  color: var(--game-gold);
  line-height: 1;
}

/* ============================================
   Settings Panel Overlay
   ============================================ */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Primary overlay */
}

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

.settings-panel {
  width: 380px;
  max-height: 80vh;
  background: var(--game-bg-dark);
  border: 2px solid var(--game-border-dark);
  box-shadow: 
    inset 0 0 0 1px var(--game-border-bronze),
    inset 0 0 0 2px var(--game-border-gold),
    var(--shadow-panel);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, var(--game-bg-base) 0%, var(--game-bg-dark) 100%);
  border-bottom: 1px solid var(--game-border-bronze);
}

.settings-header h2 {
  font-size: var(--font-md);
  color: var(--game-text-gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-close {
  background: none;
  border: none;
  color: var(--game-text-muted);
  font-size: var(--font-lg);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.settings-close:hover {
  color: var(--game-text-red);
}

.settings-close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  color: var(--game-text-cream);
}

.settings-content {
  padding: var(--space-4);
  overflow-y: auto;
  max-height: calc(80vh - 52px);
}

.settings-section {
  margin-bottom: var(--space-5);
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-title {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--game-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--game-border-dark);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}

.settings-row label {
  color: var(--game-text-cream);
  font-size: var(--font-base);
}

/* Danger Zone */
.danger-zone {
  border-color: rgba(231, 76, 60, 0.3);
}

.danger-zone .settings-section-title {
  color: var(--game-text-red);
}

.danger-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.danger-desc {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
}

.danger-btn {
  background: transparent;
  border: 1px solid rgba(231, 76, 60, 0.5);
  color: var(--game-text-red);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.danger-btn:hover {
  background: rgba(231, 76, 60, 0.2);
  border-color: var(--game-text-red);
}

.danger-btn:focus-visible {
  outline: 2px solid var(--game-text-red);
  outline-offset: 2px;
}

.danger-btn-severe {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--game-text-red);
}

.danger-btn-severe:hover {
  background: rgba(231, 76, 60, 0.3);
}

/* Backup/Restore Row */
.backup-row {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.backup-select {
  flex: 1;
  min-width: 150px;
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-darkest);
  color: var(--game-text-cream);
  border: 1px solid var(--game-border-dark);
  border-radius: 4px;
  font-size: var(--font-xs);
  cursor: pointer;
}

.backup-select:focus {
  border-color: var(--game-gold);
  outline: none;
}

/* Settings About/Version */
.settings-about {
  border-color: transparent;
  text-align: center;
  padding: var(--space-2);
}

.app-version {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
  opacity: 0.7;
}

.update-check-btn {
  background: var(--game-border-dark);
  color: var(--game-text-cream);
  border: 1px solid var(--game-border-light);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-xs);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.update-check-btn:hover {
  background: var(--game-bg-light);
  border-color: var(--game-gold);
}

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

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 40px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-bronze);
  border-radius: 10px;
  transition: var(--transition-normal);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--game-text-muted);
  border-radius: 50%;
  transition: var(--transition-normal);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--game-bg-base);
  border-color: var(--game-border-gold);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background: var(--game-gold);
}

/* Radio Buttons for Layout */
.layout-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.layout-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.layout-option:hover {
  border-color: var(--game-border-bronze);
}

.layout-option.active {
  border-color: var(--game-border-bright);
  background: var(--game-bg-base);
}

.layout-option input[type="radio"] {
  display: none;
}

.layout-radio {
  width: 14px;
  height: 14px;
  border: 2px solid var(--game-border-bronze);
  border-radius: 50%;
  position: relative;
}

.layout-option.active .layout-radio {
  border-color: var(--game-gold);
}

.layout-option.active .layout-radio::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--game-gold);
  border-radius: 50%;
}

.layout-label {
  flex: 1;
  color: var(--game-text-cream);
  font-size: var(--font-base);
}

.layout-desc {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
}

/* Hotkey Input */
.hotkey-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hotkey-value {
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  color: var(--game-text-gold);
  font-family: monospace;
  font-size: var(--font-sm);
  min-width: 120px;
  text-align: center;
}

.hotkey-btn {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, var(--game-bg-light) 0%, var(--game-bg-base) 100%);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.hotkey-btn:hover {
  border-color: var(--game-border-gold);
  color: var(--game-text-gold);
}

.hotkey-recording {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { border-color: var(--game-border-bronze); }
  50% { border-color: var(--game-gold-bright); }
}

/* Opacity Slider in Settings */
.settings-slider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.settings-slider input[type="range"] {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
}

.settings-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, var(--game-gold-bright) 0%, var(--game-gold) 100%);
  border: 1px solid var(--game-border-bright);
  border-radius: 50%;
  cursor: pointer;
}

.settings-slider .slider-value {
  min-width: 40px;
  text-align: right;
  color: var(--game-text-gold);
  font-size: var(--font-sm);
}

/* ============================================
   Compact Component Styles (used by Companion Window)
   ============================================ */
.compact-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--game-border-dark);
}

.compact-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-xs);
}

.compact-stat-label {
  color: var(--game-text-cream);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

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

/* Compact Targets List */
.compact-targets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  overflow-y: auto;
}

.compact-targets-header {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}

.compact-target {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--game-text-cream);
  transition: all var(--transition-fast);
  min-height: 36px;
}

.compact-target:hover {
  border-color: var(--game-border-bronze);
  background: rgba(201, 168, 76, 0.05);
}

.compact-target.completed {
  opacity: 0.5;
  border-color: var(--game-text-green);
}

.compact-target.completed .compact-target-name {
  text-decoration: line-through;
  color: var(--game-text-green);
}

.compact-target-img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--game-border-bronze);
  object-fit: cover;
  flex-shrink: 0;
}

.compact-target-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.compact-target-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--game-gold);
}

.compact-target-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: var(--font-xs);
}

/* Only animate when text overflows - JS adds .overflow class */
.compact-target-name.overflow {
  position: relative;
}

.compact-target:hover .compact-target-name.overflow > span {
  display: inline-block;
  animation: marquee-scroll 3s linear infinite;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% + 60px)); }
}

.compact-target-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.compact-target-counter {
  display: flex;
  align-items: center;
  gap: 2px;
}

.compact-counter-btn {
  background: rgba(201, 168, 76, 0.2);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  color: var(--game-gold);
  font-size: var(--font-xs);
  font-weight: bold;
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-fast);
}

.compact-counter-btn:hover {
  background: rgba(201, 168, 76, 0.4);
  border-color: var(--game-gold);
  transform: scale(1.1);
}

.compact-target-count {
  font-size: var(--font-xs);
  color: var(--game-gold);
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.compact-target-remove {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--game-text-muted);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-fast);
}

.compact-target-remove:hover {
  background: rgba(231, 76, 60, 0.3);
  border-color: var(--game-text-red);
  color: var(--game-text-red);
}

.compact-target:hover .compact-target-remove {
  opacity: 1;
}

.compact-target-remove:hover {
  color: var(--game-text-red);
}

/* Game-styled scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--game-border-bronze);
  border: 1px solid var(--game-border-gold);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--game-border-gold);
}

/* ============================================
   Modal Overlay (Acquisition Method)
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

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

.modal-panel {
  background: var(--game-bg-dark);
  border: 2px solid var(--game-border-dark);
  box-shadow: 
    inset 0 0 0 1px var(--game-border-bronze),
    inset 0 0 0 2px var(--game-border-gold),
    var(--shadow-panel);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 280px;
}

.modal-header {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--game-text-gold);
  text-align: center;
  margin-bottom: var(--space-4);
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.modal-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: left;
}

.modal-option:hover {
  border-color: var(--game-border-gold);
  background: var(--game-bg-base);
}

.modal-option:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.modal-icon {
  font-size: var(--font-xl);
}

.modal-label {
  font-weight: 600;
  color: var(--game-text-cream);
  display: block;
}

.modal-desc {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
}

.modal-cancel {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  color: var(--game-text-muted);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.modal-cancel:hover {
  border-color: var(--game-text-red);
  color: var(--game-text-red);
}

.modal-cancel:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ============================================
   Kill Counter UI (Trophy Cards)
   ============================================ */

/* Shared Counter Section (Monuments) */
.shared-counter-section {
  background: var(--game-bg-base);
  border: 2px solid var(--game-border-bronze);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.shared-counter-header {
  margin-bottom: var(--space-2);
}

.shared-counter-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--game-text-gold);
  display: block;
}

.shared-counter-desc {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  display: block;
  margin-top: var(--space-1);
}

.shared-counter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--game-bg-darkest);
  border-radius: var(--radius-sm);
}

.shared-counter-value {
  font-size: var(--font-lg) !important;
}

.trophy-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--game-border-dark);
  flex-basis: 100%;
}

.counter-label {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.counter-value {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--game-gold);
  min-width: 50px;
}

.counter-buttons {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Show counter buttons on trophy item hover or focus-within */
.trophy-item:hover .counter-buttons,
.trophy-item:focus-within .counter-buttons,
.counter-buttons:focus-within {
  opacity: 1;
}

/* Boss Kill Tracker counter buttons should always be visible */
.shared-counter-section .counter-buttons {
  opacity: 1;
}

/* Also show if any button has focus */
.counter-btn:focus-visible {
  opacity: 1;
}

.counter-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-sm);
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 28px;
  min-height: 28px;
}

.counter-btn:hover {
  border-color: var(--game-border-gold);
  color: var(--game-gold);
}

.counter-btn.reset {
  color: var(--game-text-muted);
}

.counter-btn.reset:hover {
  border-color: var(--game-text-red);
  color: var(--game-text-red);
}

/* Milestone display - break to own row in trophy-counter */
.trophy-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  flex-basis: 100%;
  margin-top: var(--space-1);
}

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

.milestone.obtained {
  color: var(--game-text-cream);
}

.milestone-count {
  color: var(--game-gold);
  font-weight: 600;
}

.milestone-icon {
  font-size: var(--font-sm);
}

.drop-rate {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--font-xs);
}

/* Luck indicator */
.luck-indicator {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
}

.luck-indicator.lucky {
  background: rgba(76, 175, 80, 0.2);
  color: var(--game-text-green);
}

.luck-indicator.unlucky {
  background: rgba(229, 115, 115, 0.2);
  color: var(--game-text-red);
}

.luck-indicator.average {
  background: rgba(201, 168, 76, 0.2);
  color: var(--game-gold);
}

/* ============================================
   Responsive Breakpoints - Full Coverage
   ============================================ */

/* Medium screens (1000px and below) */
@media (max-width: 1000px) {
  .container,
  .cosmetics-container {
    flex-direction: column;
  }
  
  .trophy-list,
  .cosmetics-list {
    flex: none;
    max-height: 55vh;
  }
  
  .stat-panel,
  .cosmetics-panel {
    flex: none;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    max-height: 40vh;
    overflow-y: auto;
  }
  
  .filters {
    flex-wrap: wrap;
  }
  
  .filter-group {
    min-width: 140px;
  }

  .cosmetic-tabs {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .dashboard-header {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-4);
  }
  
  .stat-group {
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  
  .stat {
    min-width: 110px;
  }

  /* Trophy sub-tabs: allow wrapping */
  .trophy-sub-tabs {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  
  .trophy-sub-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-sm);
  }

  /* Tier count grid: responsive columns */
  .tier-count {
    grid-template-columns: 80px 50px 1fr;
  }

  /* Settings panel: fluid width */
  .settings-panel {
    width: min(380px, calc(100vw - 32px));
  }
}

/* Small screens (700px and below) */
@media (max-width: 700px) {
  .cosmetic-tab {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
  }
  
  .cosmetic-item {
    --cosmetic-item-height: 90px;
    --cosmetic-slot-height: 98px; /* 90 + 8 gap */
    grid-template-columns: 40px 1fr auto;
    padding: 8px 10px;
    gap: 8px;
    height: var(--cosmetic-item-height);
  }
  
  .cosmetic-thumbnail {
    width: 40px;
    height: 40px;
  }
  
  .cosmetic-name {
    font-size: var(--font-base);
  }
  
  .cosmetic-meta,
  .cosmetic-renown {
    font-size: var(--font-sm);
  }
  
  .cosmetic-actions {
    min-width: 70px;
    font-size: var(--font-sm);
  }

  .cosmetic-actions label {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .filters {
    padding: 10px;
    gap: 8px;
  }
  
  .filter-group {
    flex: 1 1 45%;
    min-width: 120px;
  }

  .filter-group label {
    font-size: var(--font-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .filter-group select,
  .filter-group input {
    padding: 6px 8px;
    font-size: 12px;
    max-width: 100%;
  }
  
  .dashboard-header {
    padding: var(--space-2);
    gap: var(--space-3);
  }
  
  .stat {
    min-width: 90px;
  }

  .stat-label {
    font-size: var(--font-xs);
  }

  .stat-value {
    font-size: var(--font-md);
  }

  .cosmetics-list h1 {
    font-size: 20px;
    margin-bottom: var(--space-3);
  }

  .material-pill {
    padding: 1px 6px;
    font-size: var(--font-xs);
  }

  .material-row input[type='number'] {
    width: 40px;
    padding: 1px 3px;
    font-size: var(--font-xs);
  }

  .progress-bar {
    height: 4px;
  }

  .progress-text {
    font-size: var(--font-xs);
    top: -10px;
  }

  /* Trophy items: compact layout */
  .trophy-item {
    padding: 10px 12px;
    gap: 8px;
  }

  .trophy-checkboxes {
    gap: var(--space-1);
  }

  .checkbox-group {
    min-width: 55px;
  }

  .checkbox-label {
    font-size: var(--font-xs);
  }
  
  .trophy-checkbox {
    width: 18px;
    height: 18px;
  }

  /* Trophy sub-tabs: smaller at 700px */
  .trophy-sub-tab {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-sm);
  }
  
  /* Kill counter: always visible on small screens (touch devices) */
  .counter-buttons {
    opacity: 1;
  }
  
  .counter-btn {
    padding: var(--space-1);
    min-width: 24px;
    font-size: var(--font-xs);
  }
  
  /* Trophy counter: wrap on small screens */
  .trophy-counter {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  
  /* Tier count: adjust grid */
  .tier-count {
    grid-template-columns: 70px 45px 1fr;
    gap: var(--space-1);
  }

  /* Settings panel: max width */
  .settings-panel {
    width: min(340px, calc(100vw - 24px));
    max-height: 85vh;
  }
  
  .settings-content {
    max-height: calc(85vh - 52px);
  }

  /* Layout options: smaller text */
  .layout-desc {
    font-size: var(--font-xs);
  }
  
  .layout-label {
    font-size: var(--font-sm);
  }

  /* Hotkey display: wrap */
  .hotkey-display {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  
  .hotkey-value {
    min-width: 80px;
    font-size: var(--font-xs);
  }
  
  .hotkey-btn {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
  }

  /* Stat panel heading: smaller */
  .stat-panel h2 {
    font-size: 18px;
    margin-bottom: var(--space-4);
  }
  
  .stat-panel h3 {
    font-size: var(--font-sm);
  }
}

/* Extra small screens (500px and below) - handle collapsed window */
@media (max-width: 500px) {
  .top-nav {
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
  }

  .tab-button {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
  }

  .opacity-control {
    display: none; /* Hide on very small screens */
  }

  .cosmetic-item {
    --cosmetic-item-height: 80px;
    --cosmetic-slot-height: 86px; /* 80 + 6 gap (tighter) */
    grid-template-columns: 36px 1fr;
    height: var(--cosmetic-item-height);
    padding: 6px 8px;
  }

  .cosmetic-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: auto;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
  }

  .cosmetic-thumbnail {
    width: 36px;
    height: 36px;
  }

  .cosmetic-name {
    font-size: 12px;
    max-width: calc(100% - 70px);
  }

  .cosmetic-materials {
    display: none; /* Hide materials on very small screens */
  }

  .cosmetics-list,
  .trophy-list {
    padding: 10px;
    max-height: 50vh;
  }

  .stat-panel,
  .cosmetics-panel {
    padding: var(--space-3);
    max-height: 45vh;
  }

  .category-breakdown {
    display: none; /* Hide on very small screens */
  }

  /* Trophy sub-tabs: horizontal scroll */
  .trophy-sub-tabs {
    gap: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .trophy-sub-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .trophy-sub-tab {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
  }
  
  /* Trophy item: compact single column */
  .trophy-item {
    display: block;
    padding: 8px;
  }

  .trophy-info {
    margin: var(--space-2) 0;
  }

  .trophy-name {
    font-size: 14px;
  }

  .trophy-checkboxes {
    justify-content: flex-start;
    gap: var(--space-2);
    min-width: auto;
  }

  .checkbox-group {
    min-width: 50px;
  }

  /* Filters: full width stacking */
  .filters {
    padding: 8px;
    gap: var(--space-2);
  }
  
  .filter-group {
    flex: 1 1 100%;
    min-width: 100%;
  }

  /* Settings panel: near full-width */
  .settings-panel {
    width: calc(100vw - 16px);
    max-height: 90vh;
    margin: 8px;
  }
  
  .settings-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .settings-row label {
    flex: 1 1 100%;
    font-size: var(--font-sm);
  }
  
  /* Layout option: hide descriptions */
  .layout-desc {
    display: none;
  }
  
  /* Rewards totals: compact */
  .rewards-totals {
    font-size: var(--font-xs);
  }
  
  .reward-row {
    font-size: var(--font-sm);
    padding: var(--space-1) 0;
  }
}


/* ==================== LAND SIMULATOR STYLES ==================== */

/* Owned Lands Configuration */
.owned-lands-config {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  flex-shrink: 0;
}

.owned-lands-config .config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.owned-lands-config h3 {
  color: var(--game-text-gold);
  font-size: var(--font-lg);
  margin: 0;
}

.owned-lands-config .total-tiles {
  color: var(--game-gold);
  font-weight: 600;
  font-size: var(--font-lg);
}

.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.land-config-section h4 {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
}

.land-config-section h4 .hint {
  color: var(--game-text-muted);
  font-weight: normal;
  font-size: var(--font-xs);
}

/* Community land checkboxes */
.land-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.land-checkbox:hover {
  background: var(--bg-hover);
}

.land-checkbox input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--game-gold);
}

.land-checkbox .land-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.land-checkbox .name {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
}

.land-checkbox .details {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
}

/* NFT land inputs */
.owned-lands-config .land-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.owned-lands-config .land-input-row label {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
}

.input-with-tiles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.owned-lands-config .land-input-row input[type="number"] {
  width: 60px;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-darkest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--game-text-cream);
  text-align: center;
}

.owned-lands-config .land-input-row .tile-count {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
}

@media (max-width: 800px) {
  .config-grid {
    grid-template-columns: 1fr;
  }
}

.land-simulator {
  padding: var(--space-4);
  height: calc(100vh - 120px); /* Account for nav and dashboard header */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto; /* Allow scrolling when content overflows */
  overflow-x: hidden;
}

.land-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-card);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.control-group label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

#landTypeSelect {
  padding: 6px 12px;
  background: var(--bg-darker);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  min-width: 250px;
}

.control-actions {
  margin-left: auto;
}

.btn-secondary {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-secondary:active {
  transform: scale(0.97);
}

.land-layout {
  display: flex;
  gap: var(--space-3);
  flex: 0 0 auto; /* Don't grow or shrink - use natural height */
  min-height: 450px; /* Minimum height to ensure scrollbar when window is small */
}

.land-sidebar-container {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 32px gap between Place Items and Saved Layouts */
  padding-right: var(--space-1);
}

/* Center area with grid and stats */
.land-center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.land-grid-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: var(--space-3);
  background: var(--bg-darker);
  border-radius: 6px;
  min-height: 200px;
}

/* LandGrid sets this class on its container - must inherit key styles from land-grid-main */
.land-grid-container {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: var(--space-3);
  background: var(--bg-darker);
  border-radius: 6px;
  min-height: 200px;
}

/* Land grid wrapper - positioned relative for absolute tile positioning */
.land-grid-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* Stats Panel (floating bar below grid) */
.land-stats-panel {
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 35, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
  margin-top: var(--space-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: none; /* Hidden by default */
}

.land-stats-panel .stats-grid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.land-stats-panel .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 80px;
}

.land-stats-panel .stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.land-stats-panel .stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.land-stats-panel .stats-breakdown {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.land-stats-panel .stat-breakdown-item {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Optimized Layouts Panel */
.land-optimized-container {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-1);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.optimized-panel {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: var(--space-3);
  width: 100%;
}

.optimized-header {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
}

.optimized-desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.optimized-layouts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.optimized-layout-card {
  background: var(--bg-darker);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: var(--space-3);
  cursor: default;
  transition: all 0.2s;
  overflow: hidden;
}

/* House position cards are clickable */
.optimized-layout-card.house-position-card {
  cursor: pointer;
}

.optimized-layout-card.house-position-card:hover {
  border-color: var(--color-primary);
  background: rgba(74, 144, 226, 0.1);
  transform: translateY(-1px);
}

.optimized-layout-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.optimized-layout-stats {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.optimized-stat {
  background: rgba(201, 168, 76, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--color-gold);
  font-weight: 500;
}

.optimized-mini-grid {
  display: grid;
  gap: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  margin-top: var(--space-2);
  padding: 4px;
  overflow: hidden;
  width: fit-content;
}

.optimized-mini-cell {
  background: var(--tile-farmland);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle grid lines */
}

/* Size-based colors for mini grid visualization
   Colorblind-safe: Amber, Blue, Purple */
.optimized-mini-cell.size-1 {
  background: var(--tile-crop-1x1-border);
}

.optimized-mini-cell.size-2 {
  background: var(--tile-crop-2x2-border);
}

.optimized-mini-cell.size-3 {
  background: var(--tile-crop-3x3-border);
}

.optimized-mini-cell.filled {
  background: var(--color-primary);
}

.optimized-mini-cell.empty {
  background: transparent;
}

.optimized-mini-cell.house {
  background: var(--tile-house);
}

.optimized-mini-cell.door-clearance {
  background: var(--tile-door);
}

.optimized-no-land {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-4);
}

/* Community layout cards - more compact */
.community-layout-card {
  padding: var(--space-2) var(--space-3);
}

.optimized-layout-counts {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.optimized-layout-counts span {
  font-weight: 700;
}

/* Explore All button */
.optimized-explore-btn {
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.2));
  border: 2px solid rgba(168, 85, 247, 0.5);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.optimized-explore-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3));
  border-color: rgba(168, 85, 247, 0.8);
  transform: translateY(-1px);
}

.optimized-collapse-btn {
  background: rgba(100, 100, 100, 0.2);
  border-color: rgba(150, 150, 150, 0.5);
}

.optimized-collapse-btn:hover {
  background: rgba(100, 100, 100, 0.3);
  border-color: rgba(150, 150, 150, 0.8);
}

/* Sidebar Sections */
.sidebar-section {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: var(--space-3);
}

/* Extra margin between sidebar sections for clear separation */
.sidebar-section + .sidebar-section {
  margin-top: var(--space-2);
}

.sidebar-header {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
  font-weight: 600;
}

/* Search bar for item palette */
.search-wrapper {
  position: relative;
  margin-bottom: var(--space-3);
}

.search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-right: 36px;
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.search-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
  pointer-events: none;
}

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

.sidebar-header-row .sidebar-header {
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
}

.btn-small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--game-gold-dark) 100%);
  color: var(--game-bg-dark);
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-small:hover {
  background: linear-gradient(180deg, var(--game-gold-light) 0%, var(--color-gold) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.btn-small:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Category Tabs */
.category-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.category-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: var(--font-size-sm);
}

.category-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.category-tab.active {
  background: rgba(201, 168, 76, 0.15);
  color: var(--game-gold);
  border-color: var(--game-gold);
}

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

.tab-label {
  flex: 1;
}

/* Items Container */
.items-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.palette-item:hover {
  background: var(--bg-hover);
  border-color: rgba(255, 255, 255, 0.2);
}

.palette-item.selected {
  background: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.item-icon {
  font-size: 32px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.item-details {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.item-size {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.item-cost {
  color: var(--color-accent);
}

/* Crop Info Display */
.item-crop-info {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.crop-stats {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  margin-bottom: 2px;
}

.crop-level {
  color: var(--color-primary);
  font-weight: 600;
}

.crop-time {
  color: var(--text-muted);
}

.crop-yields {
  font-size: var(--font-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats Section */
.stats-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: 4px;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

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

/* Layouts Section */
.layouts-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.saved-layout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.2s;
}

.saved-layout:hover {
  background: var(--bg-hover);
  border-color: rgba(255, 255, 255, 0.2);
}

.layout-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.layout-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: 500;
}

.layout-details {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.layout-actions {
  display: flex;
  gap: var(--space-1);
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-icon:active {
  transform: scale(0.93);
}

.delete-btn:hover {
  background: var(--color-error);
  border-color: var(--color-error);
}

/* Empty States */
.empty-message {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.land-grid-placeholder {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-base);
}

/* Grid Tiles */
.land-tile,
.land-tile-invalid {
  transition: background 0.1s;
}

.land-tile:hover {
  background: var(--game-bg-taupe-hover) !important;
}

.placed-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
}

.placed-item:hover {
  transform: scale(1.05);
  z-index: 10;
}

.placement-preview {
  opacity: 0.7;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

/* Custom Scrollbar for Land Simulator Panels */
.land-sidebar-container::-webkit-scrollbar,
.land-optimized-container::-webkit-scrollbar,
.items-container::-webkit-scrollbar,
.layouts-container::-webkit-scrollbar,
.optimized-layouts-list::-webkit-scrollbar {
  width: 6px;
}

.land-sidebar-container::-webkit-scrollbar-track,
.land-optimized-container::-webkit-scrollbar-track,
.items-container::-webkit-scrollbar-track,
.layouts-container::-webkit-scrollbar-track,
.optimized-layouts-list::-webkit-scrollbar-track {
  background: var(--bg-darker);
  border-radius: 3px;
}

.land-sidebar-container::-webkit-scrollbar-thumb,
.land-optimized-container::-webkit-scrollbar-thumb,
.items-container::-webkit-scrollbar-thumb,
.layouts-container::-webkit-scrollbar-thumb,
.optimized-layouts-list::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.4);
  border-radius: 3px;
}

.land-sidebar-container::-webkit-scrollbar-thumb:hover,
.land-optimized-container::-webkit-scrollbar-thumb:hover,
.items-container::-webkit-scrollbar-thumb:hover,
.layouts-container::-webkit-scrollbar-thumb:hover,
.optimized-layouts-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* ===========================================
   NFT House Placement Controls
   =========================================== */

.house-controls {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.house-controls-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn-house-place,
.btn-house-rotate,
.btn-house-remove {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, opacity 0.2s;
}

.btn-house-place {
  background: var(--game-bg-warm);
  color: var(--game-text-white);
}

.btn-house-place:hover:not(:disabled) {
  background: #795548;
}

.btn-house-place:disabled {
  background: var(--game-bg-dark);
  color: var(--game-text-muted);
  cursor: not-allowed;
  border-color: var(--game-border-dark);
}

.btn-house-rotate {
  background: #1976d2;
  color: #fff;
}

.btn-house-rotate:hover {
  background: #2196f3;
}

.btn-house-remove {
  background: #c62828;
  color: #fff;
}

.btn-house-remove:hover {
  background: #ef5350;
}

.house-status {
  color: var(--color-text-muted);
  font-size: var(--font-base);
  margin-left: var(--space-2);
}

/* House tiles on grid */
.house-tile {
  z-index: 5;
}

.house-tile.house-body {
  background: #5d4037 !important;
}

.house-tile.house-door {
  background: #ff5722 !important;
}

.house-tile.door-clearance {
  background: rgba(255, 235, 59, 0.5) !important;
}

/* Blinking animation for invalid placement previews */
@keyframes blink-error {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ============================================
   Material Tooltip Styles
   Shows creature drop sources on hover
   ============================================ */
.material-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--game-bg-darkest);
  border: 1px solid var(--game-border-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  max-width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.material-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.tooltip-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border-bottom: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tooltip-material-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--game-bg-base);
  flex-shrink: 0;
}

.tooltip-header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tooltip-title {
  color: var(--game-text-gold);
  font-weight: 600;
  font-size: var(--font-md);
}

.tooltip-count {
  color: var(--game-text-muted);
  font-size: var(--font-sm);
}

.tooltip-body {
  padding: var(--space-2) var(--space-3);
}

.tooltip-label {
  color: var(--game-text-muted);
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
}

.tooltip-loading,
.tooltip-empty {
  color: var(--game-text-muted);
  font-style: italic;
  font-size: var(--font-sm);
  padding: var(--space-2) 0;
}

.tooltip-creatures,
.tooltip-creatures-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tooltip-creatures-scroll {
  max-height: 200px;
  overflow-y: auto;
  padding-right: var(--space-1);
}

/* Custom scrollbar for tooltip */
.tooltip-creatures-scroll::-webkit-scrollbar {
  width: 6px;
}

.tooltip-creatures-scroll::-webkit-scrollbar-track {
  background: var(--game-bg-dark);
  border-radius: 3px;
}

.tooltip-creatures-scroll::-webkit-scrollbar-thumb {
  background: var(--game-border-bronze);
  border-radius: 3px;
}

.tooltip-creatures-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--game-border-gold);
}

.tooltip-creature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--game-bg-base);
}

.tooltip-creature:hover {
  background: var(--game-bg-light);
}

.tooltip-creature-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--game-bg-dark);
  flex-shrink: 0;
}

.tooltip-creature-name {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooltip-creature-level {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
  flex-shrink: 0;
  padding: 1px 4px;
  background: var(--game-bg-dark);
  border-radius: var(--radius-sm);
}

.tooltip-more {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
  text-align: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--game-border-dark);
}

/* Material pill hover indicator */
.material-pill.has-tooltip {
  cursor: help;
  position: relative;
}

.material-pill.has-tooltip .material-pill-label {
  border-bottom: 1px dotted var(--game-text-muted);
}

.material-pill.has-tooltip:hover .material-pill-label {
  color: var(--game-text-gold);
  border-bottom-color: var(--game-text-gold);
}

/* ============================================
   Creatures Tab Styles
   Phase 3: Creature Database
   ============================================ */
.creatures-container {
  display: flex;
  gap: var(--space-4);
  height: calc(100vh - 110px);
}

.creatures-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
  overflow-y: auto;
}

.creatures-list h1 {
  margin-bottom: var(--space-3);
  color: var(--game-text-gold);
  font-size: var(--font-xl);
}

/* Creature filters layout */
.creature-filters {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto);
  gap: var(--space-3);
  align-items: end;
}

.creature-filters .filter-search {
  grid-column: 1;
}

.creature-filters .filter-group select {
  min-width: 120px;
}

.creature-items {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--space-2);
}

/* Creature item in list */
.creature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--game-bg-base) 0%, rgba(30, 28, 26, 0.8) 100%);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  height: 74px;
  box-sizing: border-box;
}

.creature-item.odd {
  background: linear-gradient(135deg, rgba(40, 36, 32, 0.9) 0%, var(--game-bg-base) 100%);
}

.creature-item:hover {
  background: linear-gradient(135deg, var(--game-bg-light) 0%, rgba(50, 46, 42, 0.9) 100%);
  border-color: var(--game-border-bronze);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.creature-item:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.creature-item.selected {
  background: var(--game-bg-light);
  border-color: var(--game-border-gold);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.3);
}

.creature-item.selected .creature-name {
  color: var(--game-text-gold);
}

.creature-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--game-bg-dark);
  flex-shrink: 0;
}

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

.creature-name {
  color: var(--game-text-cream);
  font-weight: 500;
  font-size: var(--font-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats preview in list item */
.creature-stats-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  font-size: var(--font-xs);
  color: var(--game-text-muted);
}

.stat-preview-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--game-text-muted);
}

.stat-preview-item.coming-soon {
  opacity: 0.6;
}

.stat-icon {
  font-size: 10px;
}

.stat-separator {
  color: var(--game-border-dark);
  font-size: 8px;
  margin: 0 2px;
}

.creature-drop-summary {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.drop-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.3px;
}

.drop-badge.trophy {
  background: rgba(212, 168, 76, 0.2);
  color: var(--game-text-gold);
  border: 1px solid rgba(212, 168, 76, 0.3);
}

.drop-badge.material {
  background: rgba(100, 181, 246, 0.2);
  color: var(--game-text-blue);
  border: 1px solid rgba(100, 181, 246, 0.3);
}

/* Creatures stat panel */
.creatures-panel {
  width: 300px;
  flex-shrink: 0;
  height: fit-content;
  max-height: 100%;
  overflow-y: auto;
}

.placeholder-text {
  color: var(--game-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-4);
}

/* Creature detail panel */
.creature-detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--game-border-bronze);
  margin-bottom: var(--space-3);
}

.creature-detail-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-bronze);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.creature-detail-name {
  color: var(--game-text-gold);
  font-size: var(--font-lg);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.creature-detail-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--game-border-dark);
}

.creature-detail-section h3 {
  color: var(--game-text-cream);
  font-size: var(--font-md);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--game-border-dark);
}

/* Creature stats grid */
.creature-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.creature-stat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.creature-stat-label {
  color: var(--game-text-muted);
  font-size: var(--font-xs);
  white-space: nowrap;
}

.creature-stat-value {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creature-stat-value.coming-soon {
  color: var(--game-text-muted);
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-xs);
}

.drop-category {
  margin-bottom: var(--space-3);
}

.drop-category-label {
  color: var(--game-text-gold);
  font-size: var(--font-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

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

.drop-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.drop-item.material {
  cursor: help;
}

.drop-item:hover {
  background: var(--game-bg-light);
  border-color: var(--game-border-dark);
}

.drop-item.trophy:hover {
  border-color: rgba(212, 168, 76, 0.3);
}

.drop-item.material:hover {
  border-color: rgba(100, 181, 246, 0.3);
  transform: translateX(2px);
}

.drop-item-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--game-bg-dark);
  flex-shrink: 0;
}

.drop-item-name {
  color: var(--game-text-cream);
  font-size: var(--font-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drop-item.trophy .drop-item-name {
  color: var(--game-text-gold);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .creatures-container {
    flex-direction: column;
    height: auto;
  }

  .creatures-panel {
    width: 100%;
    max-height: 300px;
  }

  .creature-items {
    max-height: 400px;
  }
}

/* ===========================================
   Tradepack Calculator Styles
   =========================================== */

.tradepacks-container {
  display: flex;
  gap: var(--space-3);
  height: calc(100vh - 110px);
  overflow: hidden;
}

/* Lands Summary Panel */
.lands-summary-panel {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.lands-summary-panel h3 {
  color: var(--game-text-gold);
  font-size: var(--font-lg);
  margin-bottom: var(--space-3);
}

.lands-summary-section {
  margin-bottom: var(--space-4);
}

.lands-summary-section-title {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
}

.land-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--font-sm);
  color: var(--game-text-cream);
}

.land-summary-row .count {
  color: var(--game-gold);
  font-weight: 600;
}

.land-summary-row.zero .count {
  color: var(--game-text-muted);
}

.land-summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--game-border-gold);
  font-weight: 600;
  color: var(--game-gold);
}

.lands-summary-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.summary-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
}

.summary-setting-row label {
  color: var(--game-text-muted);
}

.summary-setting-row .value {
  color: var(--game-text-cream);
}

.lands-summary-loading {
  color: var(--game-text-muted);
  font-size: var(--font-sm);
  text-align: center;
  padding: var(--space-4);
}

.lands-empty-state {
  text-align: center;
  padding: var(--space-4);
  color: var(--game-text-muted);
}

.lands-empty-state p {
  margin-bottom: var(--space-3);
  font-size: var(--font-sm);
}

.empty-state-hint {
  font-size: var(--font-xs);
  color: var(--game-text-muted);
  opacity: 0.8;
  font-style: italic;
  margin-top: var(--space-1);
}

#configureLandsBtn,
#farmingConfigureLandsBtn {
  margin-top: auto;
  width: 100%;
}

.tradepacks-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tradepacks-list h1 {
  font-size: var(--font-2xl);
  margin-bottom: 12px;
  color: var(--game-gold-bright);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--space-2);
}

.tradepacks-panel {
  width: 320px;
  flex-shrink: 0;
}

.tradepack-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  overflow-y: auto;
  flex: 1;
  padding: var(--space-2);
}

.tradepack-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tradepack-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.tradepack-item.selected {
  border-color: var(--color-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Hover simulate button */
.tradepack-item {
  position: relative;
}

.simulate-land-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, var(--game-bronze) 0%, var(--game-gold) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--text-on-gold);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s ease;
  z-index: 10;
}

.tradepack-item:hover .simulate-land-btn {
  opacity: 1;
  transform: translateY(0);
}

.simulate-land-btn:hover {
  background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-bronze) 100%);
  box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4);
}

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

.tradepack-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}

.tradepack-icon-fallback {
  font-size: var(--font-2xl);
}

.tradepack-name {
  font-weight: 600;
  color: var(--text-primary);
}

.tradepack-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-2);
}

.material-tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.material-more {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.tradepack-value {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

/* Tradepack Detail Panel */
.tradepack-detail h3 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
}

.detail-section {
  margin-bottom: var(--space-4);
}

.detail-section h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.material-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
}

.material-name {
  flex: 1;
  color: var(--text-primary);
}

.material-qty {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.material-cost {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.material-cost.unknown {
  color: var(--text-muted);
  font-style: italic;
}

.material-source {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Profit Breakdown */
.profit-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profit-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
}

.profit-row.profit-total {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-weight: 600;
}

.profit-label {
  color: var(--text-secondary);
}

.profit-value {
  color: var(--text-primary);
}

.profit-value.cost {
  color: var(--color-warning);
}

.profit-value.positive {
  color: var(--color-success);
}

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

/* Demand Slider */
.demand-slider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.demand-slider label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.demand-slider input[type="range"] {
  flex: 1;
}

#demandValue {
  min-width: 50px;
  text-align: right;
  color: var(--text-primary);
}

.demand-note {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .tradepacks-container {
    flex-direction: column;
    height: auto;
  }

  .lands-summary-panel {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 200px;
  }

  .tradepacks-panel {
    width: 100%;
    max-height: 300px;
  }

  .tradepack-items {
    max-height: 400px;
  }
}

/* ============================================
   Land Simulation Modal & UI
   ============================================ */

/* Simulation Button */
.simulation-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.simulation-desc {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin-bottom: var(--space-3);
}

.simulate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--game-bronze) 0%, var(--game-gold) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  color: var(--game-bg-darkest);
  font-weight: 600;
  font-size: var(--font-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.simulate-btn:hover {
  background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-gold-bright) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.3);
}

.simulate-btn .btn-icon {
  font-size: var(--font-lg);
}

/* Simulation Modal Overlay - specific selector to avoid conflicts with acquisition modal */
#simulationModal,
.land-config-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

#simulationModal.hidden {
  display: none;
}

/* Modal Content */
.modal-content {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.simulation-modal {
  max-width: 1100px;
}

/* ===== REDESIGNED SIMULATION MODAL COMPONENTS ===== */

/* Hero Section - Tradepacks at top */
.sim-hero {
  background: linear-gradient(135deg, var(--game-bg-dark) 0%, rgba(30, 28, 26, 0.95) 100%);
  border: 2px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.sim-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sim-hero-tradepack {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sim-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-gold);
  background: var(--game-bg-base);
  object-fit: contain;
  flex-shrink: 0;
}

.sim-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sim-hero-name {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--game-gold);
}

.sim-hero-count-inline {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.sim-hero-count-inline .count {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.sim-hero-count-inline .label {
  font-size: var(--font-md);
  color: var(--text-secondary);
}

.sim-hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Hero Controls - Time & Materials on right side */
.sim-hero-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
}

.sim-hero-controls-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-hero-controls-time .label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.time-input-compact {
  width: 60px;
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-sm);
  text-align: center;
}

.time-input-compact:focus {
  border-color: var(--border-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.sim-hero-controls-time .time-unit {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.btn-update {
  padding: var(--space-1) var(--space-2);
  background: var(--game-gold);
  color: var(--game-bg-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-update:hover {
  background: var(--game-gold-hover);
}

.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-xs);
}

.sim-hero-controls-materials {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}

.sim-hero-controls-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-hero-controls-header .label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.sim-hero-checkboxes {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sim-hero-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--font-sm);
}

.sim-hero-checkbox:hover {
  border-color: var(--border-gold);
}

.sim-hero-checkbox.checked {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--border-gold);
}

.sim-hero-checkbox.unchecked {
  opacity: 0.6;
}

.sim-hero-checkbox input[type="checkbox"] {
  display: none;
}

.sim-hero-checkbox .material-emoji {
  font-size: 1rem;
}

.sim-hero-checkbox .material-name {
  color: var(--text-primary);
}

.btn-material-action.btn-xs {
  padding: 2px 6px;
  font-size: var(--font-xs);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-material-action.btn-xs:hover {
  border-color: var(--border-gold);
  color: var(--text-primary);
}

/* Hero Row - badges and limiting factor inline */
.sim-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.sim-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sim-hero-limiting {
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 152, 0, 0.1);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.sim-hero-limiting strong {
  color: var(--color-warning);
}

.sim-hero-limiting .limiting-detail {
  margin-left: var(--space-2);
  color: var(--text-muted);
}

/* Legacy - keep for backwards compatibility */
.sim-hero-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sim-hero-count {
  text-align: center;
}

.sim-hero-count .count {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--game-gold);
  line-height: 1;
}

.sim-hero-count .label {
  font-size: var(--font-md);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sim-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sim-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.sim-hero-badge.limiting {
  background: rgba(255, 152, 0, 0.2);
  color: var(--color-warning);
}

.sim-hero-badge.xp {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
  cursor: help;
}

.sim-hero-materials {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.sim-hero-material {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-base);
  border-radius: var(--radius-md);
}

.sim-hero-material .emoji {
  font-size: 1.25rem;
}

.sim-hero-material .name {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.sim-hero-material .amount {
  color: var(--game-gold);
  font-weight: 600;
}

.sim-hero-material.needed {
  opacity: 0.7;
}

.sim-hero-material.needed .amount {
  color: var(--text-muted);
}

/* Crop Balance Sliders - inline in hero */
.sim-hero-balance {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.balance-header-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.balance-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.btn-sm {
  padding: 4px 8px;
  font-size: var(--font-xs);
}

.btn-optimize {
  background: rgba(76, 175, 80, 0.2);
  border-color: var(--color-success);
  color: var(--color-success);
}

.btn-optimize:hover {
  background: rgba(76, 175, 80, 0.3);
}

.balance-sliders-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-slider-row-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.balance-slider-row-inline .slider-emoji {
  width: 24px;
  text-align: center;
}

.balance-slider-row-inline .slider-material {
  width: 80px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.balance-slider-row-inline .balance-slider {
  flex: 1;
  max-width: 200px;
}

.balance-slider-row-inline .balance-value {
  width: 45px;
  text-align: right;
  font-size: var(--font-sm);
  color: var(--game-gold);
  font-weight: 600;
}

/* Controls Bar - Time + Materials inline */
.sim-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--game-bg-base);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.sim-controls-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-controls-time label {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.sim-controls-time input {
  width: 60px;
}

.sim-controls-materials {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  flex-wrap: wrap;
}

.sim-controls-materials .material-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all 0.15s;
}

.sim-controls-materials .material-chip.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--game-gold);
  color: var(--game-gold);
}

.sim-controls-materials .material-chip:hover {
  border-color: var(--game-gold);
}

.sim-controls-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* Lands Section Header */
.sim-lands-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.sim-lands-header h3 {
  margin: 0;
  color: var(--game-gold);
  font-size: var(--font-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-lands-header .stats {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* Compact Land Cards Grid */
.sim-lands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sim-land-card {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.sim-land-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: var(--game-gold);
}

.sim-land-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.sim-land-card-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.sim-land-card-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
  border-radius: var(--radius-sm);
}

.sim-land-card-crop {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  color: var(--game-gold);
  margin-bottom: var(--space-2);
}

.sim-land-card-grid {
  margin: var(--space-2) 0;
}

.sim-land-card-util {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.sim-land-card-util .bar {
  flex: 1;
  height: 6px;
  background: var(--game-bg-light);
  border-radius: 3px;
  overflow: hidden;
}

.sim-land-card-util .bar-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 3px;
  transition: width 0.3s;
}

.sim-land-card-util .bar-fill.medium {
  background: var(--game-gold);
}

.sim-land-card-util .bar-fill.low {
  background: var(--color-info);
}

/* Compact Land Card Elements (used in renderCompactLandCard) */
.sim-land-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.sim-land-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-land-util-badge {
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
  flex-shrink: 0;
}

.sim-land-util-badge.medium {
  background: rgba(218, 165, 32, 0.2);
  color: var(--game-gold);
}

.sim-land-util-badge.low {
  background: rgba(33, 150, 243, 0.2);
  color: var(--color-info);
}

.sim-land-assignment {
  font-size: var(--font-xs);
  color: var(--game-gold);
  margin-bottom: var(--space-2);
}

/* Visual grid inside compact cards */
.sim-land-card .visual-grid-container {
  margin: var(--space-2) 0;
}

.sim-land-utilization {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.sim-land-util-bar {
  flex: 1;
  height: 6px;
  background: var(--game-bg-light);
  border-radius: 3px;
  overflow: hidden;
}

.sim-land-util-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.sim-land-util-fill.high {
  background: var(--color-success);
}

.sim-land-util-fill.medium {
  background: var(--game-gold);
}

.sim-land-util-fill.low {
  background: var(--color-info);
}

.sim-land-util-text {
  min-width: 32px;
  text-align: right;
  color: var(--text-secondary);
}

/* Lands Section Header */
.sim-lands-section {
  margin-bottom: var(--space-4);
}

.sim-lands-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.sim-lands-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}

/* Collapsible Sections */
.sim-collapsible {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.sim-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--game-bg-base);
  cursor: pointer;
  transition: background 0.15s;
}

.sim-collapsible-header:hover {
  background: var(--game-bg-light);
}

.sim-collapsible-header h4 {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sim-collapsible-header .toggle {
  color: var(--text-muted);
  transition: transform 0.2s;
}

.sim-collapsible.open .sim-collapsible-header .toggle {
  transform: rotate(90deg);
}

.sim-collapsible-header .summary {
  color: var(--text-muted);
  font-size: var(--font-xs);
  margin-left: auto;
  margin-right: var(--space-2);
}

.sim-collapsible-body {
  display: none;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.sim-collapsible.open .sim-collapsible-body {
  display: block;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--game-bg-base);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--game-gold);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

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

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--text-muted);
}

.loading-spinner::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--game-border-bronze);
  border-top-color: var(--game-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Error Message */
.error-message {
  padding: var(--space-4);
  background: rgba(229, 115, 115, 0.1);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  color: var(--color-error);
}

.error-hint {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin-top: var(--space-2);
}

/* Simulation Results */
.simulation-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.simulation-header {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-3);
  background: var(--game-bg-base);
  border-radius: var(--radius-md);
}

.simulation-header .label {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin-right: var(--space-2);
}

.simulation-header .value {
  color: var(--game-gold);
  font-weight: 600;
}

.time-window-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.time-window-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--border-bronze);
  border-radius: var(--radius-sm);
  background: var(--bg-darker);
  color: var(--game-gold);
  font-weight: 600;
  font-size: var(--font-sm);
  text-align: center;
}

.time-window-input:focus {
  outline: none;
  border-color: var(--game-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.time-unit {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

.btn-update-time {
  padding: 4px 12px;
  background: var(--game-gold);
  color: var(--bg-darker);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-update-time:hover {
  background: #d4b65e;
}

.time-window-error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  margin-top: var(--space-2);
}

.time-window-error.hidden {
  display: none;
}

.farmable-count {
  color: var(--game-gold);
}

.non-farmable-hint {
  color: var(--text-muted);
  font-size: var(--font-xs);
  margin-left: var(--space-2);
}

/* Material Filter Section */
.material-filter-section {
  background: var(--game-bg-base);
  border: 1px solid var(--border-bronze);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.material-filter-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.material-filter-header .label {
  color: var(--text-muted);
  font-size: var(--font-sm);
  font-weight: 500;
}

.btn-material-action {
  padding: 4px 10px;
  font-size: var(--font-xs);
  background: var(--bg-darker);
  border: 1px solid var(--border-bronze);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-material-action:hover {
  background: var(--game-bg-light);
  border-color: var(--game-gold);
  color: var(--game-gold);
}

.material-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.material-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  background: var(--bg-darker);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.material-checkbox:hover {
  border-color: var(--border-bronze);
  background: var(--game-bg-light);
}

.material-checkbox.checked {
  border-color: var(--game-gold);
  background: rgba(201, 168, 76, 0.1);
}

.material-checkbox.unchecked {
  opacity: 0.5;
}

.material-checkbox.unchecked:hover {
  opacity: 0.8;
}

.material-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--game-gold);
  cursor: pointer;
}

.material-emoji {
  font-size: 14px;
}

.material-name {
  font-size: var(--font-xs);
  color: var(--text-primary);
}

.material-filter-status {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.selected-count {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Owned Lands Prompt */
.owned-lands-prompt {
  padding: var(--space-4);
  background: var(--game-bg-base);
  border: 1px dashed var(--border-bronze);
  border-radius: var(--radius-md);
  text-align: center;
}

.owned-lands-prompt p {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
}

.configure-lands-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--game-bg-light);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  color: var(--game-gold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.configure-lands-btn:hover {
  background: var(--game-bg-hover);
  color: var(--game-gold-bright);
}

/* Owned Lands Section */
.owned-lands-section {
  background: var(--game-bg-base);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.owned-lands-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.owned-lands-section h3 {
  margin: 0;
  color: var(--game-gold);
  font-size: var(--font-md);
}

.btn-edit-lands {
  padding: var(--space-1) var(--space-3);
  background: var(--game-bg-light);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-edit-lands:hover {
  background: var(--game-bg-hover);
  color: var(--game-gold);
  border-color: var(--game-gold);
}

/* Tax breakdown section */
.tax-breakdown {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.tax-breakdown h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.tax-breakdown-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.tax-breakdown-item:last-of-type {
  border-bottom: none;
}

.tax-land-name {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.tax-amount {
  color: var(--text-warning);
  font-size: var(--font-sm);
}

.tax-breakdown-total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-gold);
  font-weight: 600;
}

.tax-breakdown-total span:first-child {
  color: var(--text-primary);
}

.tax-total-amount {
  color: var(--text-warning);
}

/* Tradepack Production Summary - Prominent display of how many tradepacks can be made */
.tradepack-production-summary {
  background: linear-gradient(135deg, var(--game-bg-base) 0%, rgba(212, 175, 55, 0.1) 100%);
  border: 2px solid var(--game-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}

.tradepack-count-display {
  margin-bottom: var(--space-3);
}

.tradepack-count-display .count-number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--game-gold);
  line-height: 1;
}

.tradepack-count-display .count-label {
  display: block;
  font-size: var(--font-lg);
  color: var(--text-primary);
  margin-top: var(--space-1);
}

.production-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.time-window-badge {
  background: var(--game-bg-dark);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.limiting-factor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
}

.limiting-label {
  color: var(--text-muted);
}

.limiting-material {
  color: var(--text-warning);
  font-weight: 600;
}

.limiting-stats {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.material-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.material-breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--game-bg-dark);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.material-breakdown-item.limiting {
  border: 1px solid var(--text-warning);
  background: rgba(255, 152, 0, 0.1);
}

.material-breakdown-item .material-emoji {
  font-size: 1.2rem;
}

.material-breakdown-item .material-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.material-breakdown-item .material-production {
  color: var(--text-secondary);
}

.material-breakdown-item .material-packs {
  color: var(--game-gold);
  font-weight: 600;
}

.limiting-badge {
  background: var(--text-warning);
  color: var(--game-bg-base);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: 600;
}

/* Non-farmable materials styling */
.material-breakdown-item.non-farmable {
  border: 1px dashed var(--text-muted);
  background: rgba(128, 128, 128, 0.1);
  opacity: 0.9;
}

.material-breakdown-item.non-farmable .material-production.needed {
  color: var(--text-warning);
  font-weight: 500;
}

.material-breakdown-item.non-farmable .material-packs.acquire {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Crop Balance Section */
.crop-balance-section {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}

.balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.balance-header h4 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.balance-hint {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.balance-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.balance-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
}

.slider-emoji {
  font-size: var(--font-lg);
  width: 24px;
  text-align: center;
}

.slider-material {
  width: 80px;
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.balance-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg-tertiary);
  border-radius: 3px;
  cursor: pointer;
}

.balance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.balance-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.balance-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.balance-value {
  width: 50px;
  text-align: right;
  font-family: monospace;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.balance-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.btn-reset-balance {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-balance:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

/* Debug Export Button (Developer Mode) */
.btn-debug {
  padding: var(--space-1) var(--space-3);
  background: rgba(100, 100, 255, 0.1);
  border: 1px solid #6666ff;
  border-radius: var(--radius-sm);
  color: #9999ff;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-debug:hover {
  background: rgba(100, 100, 255, 0.2);
  border-color: #8888ff;
}

/* Land Assignments Section */
.land-assignments-section {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.land-assignments-section h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.land-assignments-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.land-assignment-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.land-assignment-item .land-name {
  font-weight: 500;
  color: var(--text-primary);
  min-width: 120px;
}

.land-assignment-item .assignment-arrow {
  color: var(--text-muted);
}

.land-assignment-item .assigned-material {
  color: var(--game-gold);
  font-weight: 500;
}

.land-assignment-item .crop-info {
  color: var(--text-muted);
  font-size: var(--font-xs);
  margin-left: auto;
}

/* Assigned Material Badge on land cards */
.assigned-material-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(212, 175, 55, 0.2);
  color: var(--game-gold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
}

.owned-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background: var(--game-bg-dark);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.summary-stat .stat-value {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.summary-stat .stat-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: center;
}

.summary-stat.success .stat-value {
  color: var(--color-success);
}

.summary-stat.warning .stat-value {
  color: var(--color-warning);
}

/* Stages Timeline */
.stages-timeline {
  margin-bottom: var(--space-4);
}

.stages-timeline h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.timeline-track {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0;
}

.timeline-stage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.stage-marker {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--game-gold);
  color: var(--game-bg-darkest);
  border-radius: 50%;
  font-size: var(--font-sm);
  font-weight: 700;
}

.stage-info {
  display: flex;
  flex-direction: column;
}

.stage-time {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.stage-crops {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

/* Owned Lands Grid */
.owned-lands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

/* Land Allocation Card */
.land-allocation-card {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.alloc-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.alloc-header-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.alloc-header .land-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-md);
}

.alloc-header-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.optimization-badge {
  font-size: var(--font-xs);
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.alloc-header .utilization {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.utilization.high {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

.utilization.medium {
  background: rgba(201, 168, 76, 0.2);
  color: var(--game-gold);
}

.utilization.low {
  background: rgba(100, 181, 246, 0.2);
  color: var(--game-text-blue);
}

/* Clickable Land Cards */
.clickable-land {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.clickable-land:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.2);
}

.click-hint {
  font-size: var(--font-xs);
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--space-2);
  opacity: 0.7;
}

.clickable-land:hover .click-hint {
  color: var(--game-gold);
  opacity: 1;
}

/* Land Detail Modal */
.land-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001; /* Above simulation modal */
}

.land-detail-modal.hidden {
  display: none;
}

.land-detail-modal .modal-content {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--game-bg-dark);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-bronze);
}

.land-detail-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-bronze);
}

.land-detail-modal .modal-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--game-gold);
}

.land-detail-modal .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-2xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.land-detail-modal .modal-close:hover {
  color: var(--text-primary);
}

.land-detail-modal .modal-body {
  padding: var(--space-4);
}

.land-detail-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.land-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--game-bg-base);
  border-radius: var(--radius-md);
}

.overview-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.overview-stat .stat-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.overview-stat .stat-value {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--game-gold);
}

.timeline-section h3,
.yield-summary-section h3 {
  font-size: var(--font-md);
  margin-bottom: var(--space-3);
}

.step-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-step {
  display: flex;
  gap: var(--space-3);
}

.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--game-gold);
  color: var(--bg-darker);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-sm);
}

.step-time {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.step-content {
  flex: 1;
  background: var(--game-bg-base);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.step-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.step-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.step-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.step-action .action-icon {
  font-size: var(--font-md);
}

.step-action .action-text {
  color: var(--text-secondary);
}

.yield-summary-section {
  padding: var(--space-3);
  background: var(--game-bg-base);
  border-radius: var(--radius-md);
}

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

.yield-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--bg-darker);
  border-radius: var(--radius-sm);
}

.yield-crop {
  color: var(--text-primary);
}

.yield-amount {
  color: var(--game-gold);
  font-weight: 600;
}

.alloc-crops {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.crop-alloc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  padding: 2px 4px;
}

.crop-alloc .crop-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.crop-alloc .crop-name {
  color: var(--text-secondary);
  flex: 1;
}

.crop-alloc .crop-tiles {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Land Comparison Section */
.land-comparison-section {
  margin-top: var(--space-4);
}

.land-comparison-section h3 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-md);
}

.land-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

/* Land Comparison Card */
.land-comparison-card {
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color 0.2s ease;
}

.land-comparison-card.sufficient {
  border-color: var(--color-success);
}

.land-comparison-card.insufficient {
  border-color: var(--color-error);
  opacity: 0.8;
}

.land-comparison-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.land-comparison-card .land-type {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.status-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.status-badge.can-complete {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

.status-badge.cannot-complete {
  background: rgba(229, 115, 115, 0.2);
  color: var(--color-error);
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
}

.stat-row .stat-label {
  color: var(--text-muted);
}

.stat-row .stat-value {
  color: var(--text-primary);
}

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

/* Mini Grid - supports both CSS grid layout and absolute positioned children */
.mini-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 10), var(--cell-size, 6px));
  gap: 1px;
  background: var(--game-bg-dark);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

.mini-cell {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 1px;
}

.mini-grid.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.grid-cell {
  width: var(--cell-size, 6px);
  height: var(--cell-size, 6px);
  border-radius: 1px;
}

.grid-cell.empty {
  background: var(--game-bg-light);
}

.grid-cell.planted {
  /* Color set inline via style attribute */
}

/* Harvest Badges */
.harvest-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.harvest-badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.harvest-more {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 2px 6px;
}

/* Land Config Modal */
.land-config-modal .modal-content {
  max-width: 500px;
}

.config-intro {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.land-config-section {
  margin-bottom: var(--space-4);
}

.land-config-section h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--game-gold);
  font-size: var(--font-sm);
}

.land-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.land-input-row label {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.land-input-row input[type="number"] {
  width: 60px;
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-align: center;
}

.land-input-row input[type="number"]:focus {
  border-color: var(--game-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Checkbox rows for community lands */
.land-checkbox-row {
  margin-bottom: var(--space-2);
}

.land-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.land-checkbox-label:hover {
  background: var(--game-bg-hover);
}

.land-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--game-gold);
  cursor: pointer;
}

.land-checkbox-label .land-name {
  flex: 1;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.land-checkbox-label .land-tax {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.land-hint {
  font-weight: 400;
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.config-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.btn-secondary {
  padding: var(--space-2) var(--space-4);
  background: var(--game-bg-light);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--game-bg-hover);
  color: var(--text-primary);
}

.btn-primary {
  padding: var(--space-2) var(--space-4);
  background: var(--game-gold);
  border: 1px solid var(--border-gold-bright);
  border-radius: var(--radius-md);
  color: var(--game-bg-darkest);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--game-gold-bright);
}

/* No Results */
.no-results {
  padding: var(--space-6);
  text-align: center;
}

.no-results p {
  margin: 0 0 var(--space-2) 0;
  color: var(--text-secondary);
}

.no-results .hint {
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* Detailed Harvest Timeline */
.harvest-timeline-section {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--game-bg-dark);
  border-radius: var(--radius-md);
}

.harvest-timeline-section h4 {
  margin: 0 0 var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.harvest-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-bar {
  position: relative;
  height: 32px;
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

.timeline-marker {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--game-gold);
  border: 2px solid var(--game-bg-dark);
  box-shadow: 0 0 0 2px var(--game-gold);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.marker-dot:hover {
  transform: scale(1.3);
}

.marker-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  white-space: nowrap;
}

.harvest-events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.harvest-event-group {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--game-gold);
}

.event-time {
  min-width: 40px;
  font-weight: 600;
  color: var(--game-gold);
  font-size: var(--font-sm);
}

.event-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.harvest-event {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--game-bg-dark);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--crop-color, var(--game-gold));
  font-size: var(--font-xs);
}

.event-crop {
  color: var(--text-secondary);
}

.event-yield {
  color: var(--color-success);
  font-weight: 600;
}

.event-progress {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.events-overflow {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-xs);
  padding: var(--space-2);
}

/* ============================================
   Emoji-Based Land Simulation Styles
   ============================================ */

/* Emoji Grid (replaces mini-grid with colors) */
.emoji-grid {
  margin: var(--space-2) 0;
  justify-content: center;
}

.emoji-cell {
  transition: transform 0.1s ease;
}

.emoji-cell:hover {
  transform: scale(1.1);
  z-index: 1;
}

/* Crop Legend with Emojis */
.crop-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.crop-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
}

.crop-legend-item .crop-emoji {
  font-size: 16px;
  flex-shrink: 0;
}

.crop-legend-item .crop-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crop-legend-item .crop-name {
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 500;
}

.crop-legend-item .crop-meta {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Per-Land Harvest Schedule */
.land-harvest-schedule {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.land-harvest-schedule .schedule-header {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.crop-schedule-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.crop-schedule-row .crop-emoji {
  font-size: 14px;
  flex-shrink: 0;
}

.crop-schedule-row .crop-schedule-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crop-schedule-row .crop-name {
  color: var(--text-secondary);
  font-size: var(--font-xs);
  font-weight: 500;
}

.crop-schedule-row .harvest-times {
  color: var(--game-gold);
  font-size: var(--font-xs);
  opacity: 0.85;
}

/* Farming Plan Overview */
.farming-plan-overview {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.farming-plan-overview h4 {
  margin: 0 0 var(--space-3) 0;
  color: var(--game-gold);
  font-size: var(--font-md);
  font-weight: 600;
}

.plan-crops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.plan-crop-card {
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.plan-crop-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.plan-crop-header .plan-emoji {
  font-size: var(--font-2xl);
}

.plan-crop-header .plan-crop-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-sm);
}

.plan-crop-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.plan-detail {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
}

.plan-detail .detail-label {
  color: var(--text-muted);
}

.plan-detail .detail-value {
  color: var(--text-secondary);
}

.plan-crop-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.plan-crop-schedule .harvest-badge {
  font-size: var(--font-xs);
  padding: 2px 5px;
  background: rgba(201, 168, 76, 0.15);
}

/* Timer button in farming plan card */
.plan-crop-card .btn-start-timer {
  margin-top: var(--space-2);
  width: 100%;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-sm);
  color: var(--game-gold);
}

/* Event emoji in harvest timeline */
.event-emoji {
  font-size: 14px;
  flex-shrink: 0;
}

/* Owned lands grid header */
.owned-lands-grid h4 {
  margin: var(--space-4) 0 var(--space-3) 0;
  color: var(--text-secondary);
  font-size: var(--font-md);
  grid-column: 1 / -1;
}

/* ============================================
   Action Timeline Styles (48-hour step-by-step)
   ============================================ */

.action-timeline-section {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.action-timeline-section h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--game-gold);
  font-size: var(--font-md);
  font-weight: 600;
}

.timeline-intro {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin: 0 0 var(--space-3) 0;
}

.timeline-scroll-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

.action-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.timeline-hour-block {
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.hour-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.hour-badge {
  background: var(--game-gold);
  color: var(--game-bg-darkest);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-sm);
}

.hour-count {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

.hour-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.land-actions-group {
  padding: var(--space-2);
  background: var(--game-bg-dark);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--game-gold);
}

.land-actions-group .land-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-xs);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  border-left: 3px solid var(--action-color, var(--game-gold));
  background: rgba(0, 0, 0, 0.2);
}

.action-item.action-plant {
  border-left-color: #4caf50;
}

.action-item.action-harvest {
  border-left-color: #ff9800;
}

.action-item.action-replant {
  border-left-color: #2196f3;
}

.action-item .action-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.action-item .action-desc {
  color: var(--text-secondary);
}

.timeline-summary {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.timeline-summary .summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.timeline-summary .action-icon {
  font-size: 14px;
}

/* Total Yields Section */
.total-yields-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.total-yields-section h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--game-gold);
  font-size: var(--font-sm);
  font-weight: 600;
}

.yields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
}

.yield-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--game-bg-base);
  border-radius: var(--radius-sm);
}

.yield-item .yield-emoji {
  font-size: 20px;
  flex-shrink: 0;
}

.yield-item .yield-material {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--font-sm);
}

.yield-item .yield-amount {
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--font-md);
  margin-left: auto;
}

.yield-item .yield-source {
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* Land Yield Summary */
.land-yield-summary {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.land-yield-summary .yield-header {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.land-yield-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
}

.land-yield-item .yield-emoji {
  font-size: 14px;
}

.land-yield-item .yield-info {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

/* ============================================
   Floating Companion Window Styles
   ============================================ */

.companion-window {
  background: rgba(15, 12, 8, 0.95);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-md);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.companion-drag-handle {
  -webkit-app-region: drag;
  background: linear-gradient(180deg, var(--game-bg-base) 0%, var(--game-bg-dark) 100%);
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--game-border-dark);
  cursor: move;
  min-height: 24px;
  flex-shrink: 0;
}

.companion-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--game-text-gold);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.companion-close-btn {
  -webkit-app-region: no-drag;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--game-text-muted);
  width: 18px;
  height: 18px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  line-height: 1;
}

.companion-close-btn:hover {
  border-color: var(--game-text-red);
  color: var(--game-text-red);
  background: rgba(231, 76, 60, 0.3);
}

.companion-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Companion uses existing compact styles with minor adjustments */
.companion-window .compact-stats {
  border-bottom: 1px solid var(--game-border-dark);
  padding-bottom: var(--space-2);
  margin-bottom: 0;
}

.companion-window .compact-stat {
  padding: 4px 0;
}

.companion-window .compact-targets {
  flex: 1;
  overflow-y: auto;
}

.companion-window .compact-targets-header {
  position: sticky;
  top: 0;
  background: rgba(15, 12, 8, 0.95);
  padding: 4px 0;
  z-index: 1;
}

.companion-window .compact-target {
  padding: 4px 6px;
  min-height: 32px;
  gap: var(--space-2);
}

.companion-window .compact-target-img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.companion-window .compact-target-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.companion-window .compact-target-name {
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.companion-window .compact-target-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.companion-window .compact-target-counter {
  display: flex;
  align-items: center;
  gap: 2px;
}

.companion-window .compact-target-count {
  min-width: 24px;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--game-text-gold);
}

.companion-window .compact-counter-btn {
  width: 18px;
  height: 18px;
  font-size: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.companion-window .compact-counter-btn.decrement {
  background: rgba(231, 76, 60, 0.15);
}

.companion-window .compact-counter-btn.decrement:hover {
  background: rgba(231, 76, 60, 0.3);
  border-color: var(--game-text-red);
}

.companion-window .compact-target-remove {
  width: 18px;
  height: 18px;
  font-size: 14px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.companion-window .compact-target:hover .compact-target-remove {
  opacity: 1;
}

.companion-window .compact-target-checkbox {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Empty targets state */
.compact-empty-targets {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-2);
  color: var(--game-text-muted);
  font-size: var(--font-sm);
  text-align: center;
  gap: 4px;
}

.compact-empty-hint {
  font-size: var(--font-xs);
  opacity: 0.7;
}

/* Acquisition modal in companion */
.companion-window ~ .modal-overlay {
  position: fixed;
  inset: 0;
}

.companion-window ~ .modal-overlay .modal-panel {
  max-width: 200px;
}

.companion-window ~ .modal-overlay .acquisition-option {
  padding: 8px;
  font-size: var(--font-sm);
}

.companion-window ~ .modal-overlay .option-icon {
  font-size: 16px;
}

.companion-window ~ .modal-overlay .option-label {
  font-size: var(--font-sm);
}

.companion-window ~ .modal-overlay .option-desc {
  font-size: var(--font-xs);
}

/* ============================================
   Semantic Efficiency Colors
   ============================================ */
.efficiency-value {
  font-weight: 600;
}

.efficiency-value.low {
  color: var(--game-text-red);
}

.efficiency-value.medium {
  color: #f59e0b;
}

.efficiency-value.high {
  color: var(--game-text-green);
}

/* ============================================
   Empty State Styling
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--game-text-muted);
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--font-lg);
  color: var(--game-text-cream);
  margin-bottom: var(--space-2);
}

.empty-state-message {
  font-size: var(--font-sm);
  color: var(--game-text-muted);
  max-width: 280px;
  line-height: 1.5;
}

/* ============================================
   Phase 3: Enhanced Interactions
   ============================================ */

/* Enhanced card hover with lift effect */
.palette-item {
  transition: all var(--transition-normal);
}

.palette-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.palette-item:active {
  transform: scale(0.98);
}

/* Checkbox hover scale */
.trophy-checkbox {
  transition: transform var(--transition-fast);
}

.trophy-checkbox:hover {
  transform: scale(1.1);
}

/* Checkmark animation */
@keyframes checkmark-pop {
  0% { transform: translate(-50%, -50%) scale(0); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.trophy-checkbox:checked::after {
  animation: checkmark-pop 0.2s ease-out;
}

/* Checkbox celebration animation - triggered on tier completion */
@keyframes celebratePulse {
  0% {
    box-shadow: 0 0 0 0 var(--celebrate-color, rgba(192, 192, 192, 0.6));
  }
  50% {
    box-shadow: 0 0 0 8px var(--celebrate-color, rgba(192, 192, 192, 0));
  }
  100% {
    box-shadow: 0 0 0 12px transparent;
  }
}

@keyframes celebrateGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.4);
  }
}

.checkbox-celebrate {
  animation: celebratePulse 0.5s ease-out, celebrateGlow 0.5s ease-out;
}

/* Tier-specific celebration colors */
.checkbox-celebrate.tier-base {
  --celebrate-color: rgba(192, 192, 192, 0.6);
}

.checkbox-celebrate.tier-golden {
  --celebrate-color: rgba(232, 200, 76, 0.6);
}

.checkbox-celebrate.tier-enchanted {
  --celebrate-color: rgba(179, 157, 219, 0.6);
}

/* Cosmetic item celebration */
.cosmetic-item.celebrate {
  animation: celebratePulse 0.5s ease-out;
  --celebrate-color: rgba(232, 200, 76, 0.5);
}


/* Button loading state */
.btn-loading {
  position: relative;
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Subtle pulse for pending states */
@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.pending-animation {
  animation: subtle-pulse 2s ease-in-out infinite;
}

/* Card selection feedback */
.saved-layout {
  transition: all var(--transition-normal);
}

.saved-layout:hover {
  border-color: var(--game-border-gold);
  background: rgba(201, 168, 76, 0.05);
}

/* Tab transition smoothness */
.tab-button,
.trophy-sub-tab,
.cosmetic-tab,
.category-tab {
  transition: all var(--transition-normal);
}

/* ============================================
   Phase 4: Large Screen Breakpoints (1200px+)
   ============================================ */
@media (min-width: 1200px) {
  .trophy-list,
  .cosmetics-list {
    flex: 1;
  }

  .stat-panel {
    flex: 0 0 300px;
  }

  .land-sidebar-container {
    width: 280px;
  }

  /* Larger modal panels on wide screens */
  .modal-panel {
    max-width: 500px;
  }

  /* More spacious grid on large screens */
  .land-grid-container {
    min-width: 500px;
  }
}

/* ============================================
   Farming Tab Styles
   ============================================ */

.farming-container {
  display: flex;
  gap: var(--space-3);
  height: calc(100vh - 110px);
  overflow: hidden;
}

/* Farming List (Left Panel) */
.farming-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.farming-list h1 {
  font-size: var(--font-2xl);
  margin: var(--space-3);
  margin-bottom: 0;
  color: var(--game-gold-bright);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.farming-filters {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--game-bg-base);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.farming-search {
  flex: 1;
  max-width: 300px;
}

.farming-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.farming-search input:focus {
  outline: none;
  border-color: var(--game-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.farming-category {
  min-width: 140px;
}

.farming-category select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
}

.farming-category select:focus {
  outline: none;
  border-color: var(--game-gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Crop Items Grid */
#cropItems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  overflow-y: auto;
  flex: 1;
  padding: var(--space-3);
}

.crop-item {
  display: flex;
  gap: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.crop-item:hover {
  border-color: var(--game-gold);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.crop-item.selected {
  border-color: var(--game-gold);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 1px var(--game-gold), var(--shadow-glow);
}

.crop-checkbox {
  display: flex;
  align-items: flex-start;
  padding-top: var(--space-1);
}

.crop-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--game-gold);
  cursor: pointer;
}

.crop-content {
  flex: 1;
  min-width: 0;
}

.crop-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.crop-icon {
  font-size: var(--font-lg);
}

.crop-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-md);
}

.crop-materials {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crop-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.crop-time::before {
  content: "⏱️ ";
}

.crop-size::before {
  content: "📐 ";
}

.crop-xp {
  color: var(--game-gold);
}

.crop-xp::before {
  content: "⭐ ";
}

/* Farming Selection Panel (Right Side) */
.farming-panel {
  width: 320px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-left: 1px solid var(--border-subtle);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.farming-panel h3 {
  color: var(--game-gold);
  font-size: var(--font-lg);
  margin-bottom: var(--space-3);
}

#farmingSelectionPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.selection-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--text-muted);
}

.placeholder-text {
  font-style: italic;
}

.selection-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

.selection-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.selection-icon {
  font-size: var(--font-md);
}

.selection-name {
  flex: 1;
  font-size: var(--font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-lg);
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.selection-remove:hover {
  color: var(--game-text-red);
}

.selection-summary {
  padding: var(--space-3);
  background: var(--game-bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--font-sm);
}

.summary-label {
  color: var(--text-muted);
}

.summary-value {
  color: var(--text-primary);
  text-align: right;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-actions {
  display: flex;
  gap: var(--space-2);
}

.btn-clear-selection {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-light);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-clear-selection:hover {
  background: var(--game-bg-hover);
  color: var(--text-primary);
}

.btn-simulate-farming {
  flex: 2;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--game-bronze) 0%, var(--game-gold) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  color: var(--game-bg-darkest);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-simulate-farming:hover {
  background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-gold-bright) 100%);
  box-shadow: var(--shadow-glow);
}

/* Farming Simulation Modal */
#farmingSimulationModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

#farmingSimulationModal.hidden {
  display: none;
}

#farmingSimulationModal .modal-content {
  background: var(--game-bg-dark);
  border: 2px solid var(--game-border-bronze);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  max-width: 900px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

#farmingSimulationModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

#farmingSimulationModal .modal-header h2 {
  margin: 0;
  color: var(--game-gold);
  font-size: var(--font-xl);
}

#farmingSimulationModal .modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-2xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

#farmingSimulationModal .modal-close:hover {
  color: var(--text-primary);
}

#farmingSimulationModal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Farming Simulation Results - uses shared .sim-hero, .sim-lands-section styles from tradepack */
.farming-simulation-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Badge for crops count */
.sim-hero-badge.crops {
  color: var(--game-text-green);
  border-color: var(--game-text-green);
}

.no-yields {
  color: var(--text-muted);
  font-style: italic;
}

/* Farming Lands Grid - now uses .sim-lands-grid from tradepack */
.farming-lands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
}

.farming-lands-grid .sim-land-card,
.sim-lands-grid .sim-land-card {
  background: var(--game-bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.farming-lands-grid .sim-land-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.farming-lands-grid .sim-land-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.farming-lands-grid .sim-land-assignment {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.farming-lands-grid .sim-land-util-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 600;
}

.farming-lands-grid .sim-land-util-badge.util-high {
  background: var(--game-text-green);
  color: var(--game-bg-dark);
}

.farming-lands-grid .sim-land-util-badge.util-medium {
  background: var(--game-gold);
  color: var(--game-bg-dark);
}

.farming-lands-grid .sim-land-util-badge.util-low {
  background: var(--game-text-red);
  color: white;
}

.farming-lands-grid .sim-land-utilization {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.farming-lands-grid .sim-land-util-bar {
  flex: 1;
  height: 6px;
  background: var(--game-bg-base);
  border-radius: 3px;
  overflow: hidden;
}

.farming-lands-grid .sim-land-util-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.farming-lands-grid .sim-land-util-fill.util-high {
  background: var(--game-text-green);
}

.farming-lands-grid .sim-land-util-fill.util-medium {
  background: var(--game-gold);
}

.farming-lands-grid .sim-land-util-fill.util-low {
  background: var(--game-text-red);
}

.farming-lands-grid .sim-land-util-text {
  font-size: var(--font-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.farming-lands-grid .emoji-grid {
  margin: var(--space-2) auto;
}

/* Farming Balance Sliders */
.farming-balance {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.farming-balance .slider-lands {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.farming-results-placeholder {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-muted);
}

.farming-results-placeholder .hint {
  font-size: var(--font-sm);
  margin-top: var(--space-2);
}

/* No Lands Prompt */
.no-lands-prompt {
  text-align: center;
  padding: var(--space-6);
}

.no-lands-prompt h3 {
  color: var(--game-gold);
  margin-bottom: var(--space-2);
}

.no-lands-prompt p {
  color: var(--text-muted);
}

/* Empty State */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--text-muted);
  font-style: italic;
}

/* Error State */
.error-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--game-text-red);
}

.error-detail {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Loading Spinner */
.loading-spinner {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-muted);
}

/* Loading State */
.loading-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-muted);
  font-style: italic;
  grid-column: 1 / -1;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .farming-container {
    flex-direction: column;
  }

  .farming-container .lands-summary-panel {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: 200px;
  }

  .farming-panel {
    width: 100%;
    max-height: 200px;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }
}

/* ========================================
   Farming Session Panel
   ======================================== */
.farming-session-panel {
  position: fixed;
  right: var(--space-4);
  top: 60px;
  bottom: var(--space-4);
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}

.farming-session-panel.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.farming-session-panel.minimized {
  bottom: auto;
  height: auto;
}

.farming-session-panel.minimized .session-panel-body,
.farming-session-panel.minimized .session-panel-footer {
  display: none;
}

/* Panel Header */
.session-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-subtle);
}

.session-panel-title {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.session-panel-controls {
  display: flex;
  gap: var(--space-1);
}

.session-minimize-btn,
.session-close-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.session-minimize-btn:hover {
  background: var(--game-bg-hover);
  color: var(--text-primary);
}

.session-close-btn:hover {
  background: rgba(239, 83, 80, 0.2);
  color: var(--color-error);
}

/* Panel Body */
.session-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.session-lands-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Land Card */
.session-land-card {
  background: var(--bg-medium);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.15s ease;
}

.session-land-card:hover {
  border-color: var(--border-light);
}

.session-land-card.active {
  border-color: var(--game-gold);
}

.session-land-card.ready {
  border-color: var(--color-success);
  background: rgba(76, 175, 80, 0.05);
  animation: readyPulse 2s ease-in-out infinite;
}

@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0); }
}

.session-land-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.session-land-header:hover {
  background: var(--game-bg-hover);
}

.session-land-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-land-name {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.session-land-type {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.session-land-status {
  text-align: right;
}

.session-status {
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.session-status.idle {
  color: var(--text-muted);
  background: var(--bg-dark);
}

.session-status.active {
  color: var(--game-gold);
  background: rgba(201, 168, 76, 0.1);
  font-variant-numeric: tabular-nums;
}

.session-status.ready {
  color: var(--color-success);
  background: rgba(76, 175, 80, 0.15);
}

/* Land Body (expanded) */
.session-land-body {
  display: none;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-dark);
}

.session-land-card.expanded .session-land-body {
  display: block;
}

.session-land-placements {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.session-land-timeline h4 {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.session-timeline-item {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-xs);
  padding: 2px 0;
  color: var(--text-secondary);
}

.timeline-hour {
  color: var(--text-muted);
  min-width: 50px;
}

.timeline-action {
  text-transform: capitalize;
}

.timeline-crop {
  color: var(--text-primary);
}

.session-timeline-empty {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-style: italic;
}

.session-land-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

/* Panel Footer */
.session-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-dark);
  border-top: 1px solid var(--border-subtle);
}

.session-progress-text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.session-end-btn {
  flex-shrink: 0;
}

/* Start Session Button (in simulation modal) */
.btn-start-session {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--game-gold);
  border: none;
  border-radius: var(--radius-md);
  color: var(--bg-darker);
  font-weight: 600;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-start-session:hover:not(:disabled) {
  background: var(--game-gold-bright);
  transform: translateY(-1px);
}

.btn-start-session:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-start-session.session-active {
  background: var(--color-success);
}

/* Utility button styles for session panel */
.btn-success {
  background: var(--color-success);
  color: white;
  border: none;
}

.btn-success:hover {
  background: #43a047;
}

.btn-primary {
  background: var(--game-gold);
  color: var(--bg-darker);
  border: none;
}

.btn-primary:hover {
  background: var(--game-gold-bright);
}

/* ============================================
   Z-Index Reference Scale
   ============================================
   Layer hierarchy for consistent stacking:

   15    - Placed items on grid
   100   - Sticky headers
   500   - Farming session panel
   900   - Loading overlay
   1000  - Settings overlay
   1001  - Modal overlay
   1100  - Toast notifications
   10000 - Tooltips
   ============================================ */

/* ============================================
   Events Tab Styles
   ============================================ */

.events-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  height: 100%;
  overflow-y: auto;
}

/* Events Header */
.events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--game-bg-base);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-md);
}

.events-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.events-header h1 {
  font-size: var(--font-lg);
  color: var(--game-text-gold);
  margin: 0;
}

.events-reset-timer,
.events-fame-counter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.events-reset-timer .label,
.events-fame-counter .label {
  color: var(--text-muted);
}

.events-reset-timer .timer,
.events-fame-counter .count {
  color: var(--game-text-gold);
  font-weight: 600;
  font-family: 'Consolas', monospace;
}

.events-fame-counter .count.complete {
  color: var(--color-success);
}

/* Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Events Category */
.events-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.events-category-title {
  font-size: var(--font-md);
  color: var(--text-secondary);
  font-weight: 600;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--game-border-dark);
}

/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Event Card */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--game-bg-base);
  border: 1px solid var(--game-border-bronze);
  border-left: 3px solid var(--event-color, var(--game-border-bronze));
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}

.event-card:hover {
  background: var(--game-bg-light);
  border-color: var(--game-border-gold);
}

.event-card.active {
  border-left-color: var(--color-success);
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.2);
}

.event-card.maxed {
  opacity: 0.7;
  border-left-color: var(--text-muted);
}

/* Event Header */
.event-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.event-icon {
  font-size: var(--font-xl);
  line-height: 1;
}

.event-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.event-name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.event-description {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Event Status Badges */
.event-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: var(--font-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-status.active {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

.event-status.cooldown {
  background: rgba(201, 168, 76, 0.2);
  color: var(--game-gold);
}

.event-status.maxed {
  background: rgba(154, 148, 136, 0.2);
  color: var(--text-muted);
}

/* Event Progress */
.event-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.event-progress .progress-bar {
  flex: 1;
  height: 6px;
  background: var(--game-bg-dark);
  border-radius: 3px;
  overflow: hidden;
}

.event-progress .progress-fill {
  height: 100%;
  background: var(--game-gold);
  border-radius: 3px;
  transition: width var(--transition-normal);
}

.event-progress .progress-fill.fame {
  background: linear-gradient(90deg, var(--game-gold), var(--game-gold-bright));
}

.event-progress .progress-text {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}

.event-progress .progress-text.maxed {
  color: var(--color-success);
}

/* Event Timer */
.event-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
  font-family: 'Consolas', monospace;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-secondary);
}

.event-timer.active {
  color: var(--color-success);
  border-color: rgba(76, 175, 80, 0.3);
  background: rgba(76, 175, 80, 0.1);
}

.event-timer.cooldown {
  color: var(--game-gold);
  border-color: rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.1);
}

/* Event Actions */
.event-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.btn-event {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-md);
  background: var(--game-bg-light);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-event:hover:not(:disabled) {
  background: var(--game-bg-hover);
  border-color: var(--game-border-gold);
  color: var(--text-primary);
}

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

.btn-event.start {
  background: var(--game-gold);
  border-color: var(--game-gold);
  color: var(--game-bg-darkest);
}

.btn-event.start:hover {
  background: var(--game-gold-bright);
  border-color: var(--game-gold-bright);
}

.btn-event.complete {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.btn-event.complete:hover {
  background: #43a047;
  border-color: #43a047;
}

.btn-event.stop {
  background: transparent;
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-event.stop:hover {
  background: rgba(229, 115, 115, 0.1);
}

.btn-event.reset {
  background: transparent;
  border-color: var(--text-muted);
  color: var(--text-muted);
}

.btn-event.reset:hover {
  background: var(--game-bg-hover);
  color: var(--text-secondary);
}

/* Events Stats in Header */
.events-stats {
  display: flex;
  gap: var(--space-3);
}

.events-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-sm);
}

.events-stat .stat-label {
  color: var(--text-muted);
}

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

/* Events Filters */
.events-filters {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--game-bg-base);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
}

.events-search {
  flex: 1;
}

.events-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.events-search input:focus {
  outline: none;
  border-color: var(--game-border-gold);
}

.events-search input::placeholder {
  color: var(--text-muted);
}

.events-area-filter select {
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
  min-width: 150px;
}

.events-area-filter select:focus {
  outline: none;
  border-color: var(--game-border-gold);
}

/* Event Count in Category Title */
.event-count {
  font-weight: normal;
  color: var(--text-muted);
  font-size: var(--font-sm);
}

/* Event Meta (Level + Status) */
.event-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.event-level {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--game-bg-dark);
  border-radius: var(--radius-sm);
}

/* Event Guide Badge */
.event-guide-badge {
  font-size: var(--font-md);
  cursor: help;
  opacity: 0.8;
}

.event-guide-badge:hover {
  opacity: 1;
}

/* Event Rewards Row */
.event-rewards-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.event-xp-silver {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-sm);
}

.event-xp,
.event-silver {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
}

/* Event Rewards */
.event-rewards {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  cursor: help;
}

.reward-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.reward-qty {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.reward-more {
  font-size: var(--font-xs);
  color: var(--text-muted);
  padding: 2px 4px;
}

/* Server Reset Display */
.server-reset-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--game-bg-dark);
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-md);
}

.reset-label {
  font-size: var(--font-sm);
  color: var(--text-muted);
}

.reset-timer {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--game-text-gold);
  font-family: 'Consolas', monospace;
}

/* Event Status - Completed */
.event-status.completed {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
}

/* Favorite Button */
.btn-favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--game-border-dark);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-favorite:hover {
  border-color: var(--game-gold);
  color: var(--game-gold);
}

.btn-favorite.active {
  color: var(--game-gold);
  border-color: var(--game-gold);
}

/* Cooldown Select Dropdown (Main Events Tab) */
.event-actions .cooldown-select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-sm);
  font-weight: 500;
  border: 1px solid var(--game-border-bronze);
  border-radius: var(--radius-md);
  background: var(--game-bg-light);
  color: var(--text-muted);
  cursor: pointer;
  min-width: 50px;
}

.event-actions .cooldown-select:hover {
  border-color: var(--game-border-gold);
  color: var(--text-primary);
}

.event-actions .cooldown-select:focus {
  outline: none;
  border-color: var(--game-border-gold);
}

/* Cooldown Card State */
.event-card.cooldown {
  border-left-color: var(--game-gold);
}

.event-timer.cooldown {
  color: var(--game-gold);
  border-color: rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.1);
}

.event-status.cooldown {
  background: rgba(201, 168, 76, 0.2);
  color: var(--game-gold);
}