/* ============================================================
   LUMIVALE HEX MAP - MAIN STYLES
   Dark Premium Theme | Glassmorphism | SVG Hex Map
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
  --bg-dark:        #080810;
  --bg-surface:     #0f0f1a;
  --bg-panel:       rgba(12, 12, 22, 0.93);
  --bg-card:        rgba(20, 20, 35, 0.85);
  --bg-hover:       rgba(34, 211, 238, 0.05);

  --accent-orange:       #f97316;
  --accent-orange-glow:  rgba(249, 115, 22, 0.3);
  --accent-orange-dim:   rgba(249, 115, 22, 0.12);
  --accent-cyan:         #22d3ee;
  --accent-cyan-glow:    rgba(34, 211, 238, 0.25);
  --accent-cyan-dim:     rgba(34, 211, 238, 0.08);
  --accent-purple:       #a855f7;
  --accent-purple-glow:  rgba(168, 85, 247, 0.25);
  --accent-green:        #4ade80;

  --text-primary:   #f0f4f8;
  --text-secondary: #b0bec5;
  --text-muted:     #546e7a;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-glow:    rgba(34, 211, 238, 0.22);
  --border-orange:  rgba(249, 115, 22, 0.3);

  --panel-blur:   blur(18px);
  --panel-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-full: 9999px;

  --toolbar-height:     60px;
  --sidebar-left-w:     230px;
  --sidebar-right-w:    340px;

  --transition-fast: 0.13s ease;
  --transition-md:   0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ---- App Wrapper ---- */
#app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ===========================================================
   TOOLBAR
   =========================================================== */
#toolbar {
  height: var(--toolbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index: 100;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Logo */
#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
  flex-shrink: 0;
}

.logo-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5)); }
  50%       { transform: translateY(-3px); filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.8)); }
}

.logo-text {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.logo-text span {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Logo map / edit-mode toggle button */
.logo-map-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-left:     10px;
  width:           36px;
  height:          36px;
  font-size:       20px;
  border:          1px solid rgba(255,255,255,0.08);
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,0.03);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      all 0.18s ease;
  line-height:     1;
}

.logo-map-btn:hover {
  background:    var(--accent-cyan-dim);
  border-color:  var(--border-glow);
  box-shadow:    0 0 14px var(--accent-cyan-glow);
  transform:     scale(1.08);
}

.logo-map-btn.active {
  background:    rgba(234, 179, 8, 0.14);
  border-color:  rgba(234, 179, 8, 0.5);
  box-shadow:    0 0 18px rgba(234, 179, 8, 0.35);
  animation:     editModePulse 2.2s ease-in-out infinite;
}

@keyframes editModePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(234, 179, 8, 0.3); }
  50%       { box-shadow: 0 0 26px rgba(234, 179, 8, 0.6), 0 0 8px rgba(234,179,8,0.4); }
}

/* Toolbar divider */
.toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

#toolbar-spacer { flex: 1; }

/* Hex size control */
#hex-size-control {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     5px 12px;
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background:  rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.hex-size-icon {
  font-size:   17px;
  opacity:     0.7;
  flex-shrink: 0;
  line-height: 1;
}

.hex-size-slider {
  width:              90px;
  -webkit-appearance: none;
  height:             3px;
  border-radius:      3px;
  background:         rgba(255,255,255,0.12);
  outline:            none;
  cursor:             pointer;
  flex-shrink:        0;
}

.hex-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         13px;
  height:        13px;
  border-radius: 50%;
  background:    var(--accent-cyan);
  border:        2px solid rgba(0,0,0,0.4);
  cursor:        pointer;
  transition:    transform 0.12s ease;
}

.hex-size-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }

.hex-size-val {
  font-size:   11px;
  font-weight: 600;
  color:       var(--accent-cyan);
  min-width:   34px;
  text-align:  right;
  font-variant-numeric: tabular-nums;
}

/* Toolbar Buttons */
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.toolbar-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.03));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.toolbar-btn:hover {
  background: var(--accent-cyan-dim);
  border-color: var(--border-glow);
  color: var(--text-primary);
}

.toolbar-btn:hover::before { opacity: 1; }

.toolbar-btn.active {
  background: var(--accent-orange-dim);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  box-shadow: 0 0 16px var(--accent-orange-glow), inset 0 0 12px rgba(249,115,22,0.05);
}

.btn-icon { font-size: 14px; }

#btn-pokemon-search {
  background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(34,211,238,0.06));
  border-color: rgba(168, 85, 247, 0.25);
  color: var(--accent-purple);
}

#btn-pokemon-search:hover {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(34,211,238,0.1));
  border-color: var(--accent-purple);
  box-shadow: 0 0 16px var(--accent-purple-glow);
  color: #c084fc;
}

/* Zoom Controls */
#zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--accent-cyan-dim);
  color: var(--accent-cyan);
}

/* ===========================================================
   MAP CONTAINER
   =========================================================== */
#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

#map-svg:active { cursor: grabbing; }

/* ===========================================================
   SVG HEX CELLS
   =========================================================== */
.hex-cell {
  fill:         rgba(255, 255, 255, 0.025);
  stroke:       rgba(255, 255, 255, 0.14);
  stroke-width: 2;
  transition: fill 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease, filter 0.18s ease;
  cursor: pointer;
}

/* Biome-tinted fills — very transparent so art de fundo shows through */
.hex-cell.biome-forest   { fill: rgba(22,  101, 52,  0.06); }
.hex-cell.biome-plains   { fill: rgba(101, 163, 13,  0.05); }
.hex-cell.biome-mountain { fill: rgba(71,  85,  105, 0.06); }
.hex-cell.biome-lake     { fill: rgba(3,   105, 161, 0.06); }
.hex-cell.biome-volcano  { fill: rgba(185, 28,  28,  0.06); }
.hex-cell.biome-cave     { fill: rgba(68,  64,  60,  0.08); }
.hex-cell.biome-beach    { fill: rgba(180, 83,  9,   0.05); }
.hex-cell.biome-swamp    { fill: rgba(63,  98,  18,  0.06); }
.hex-cell.biome-city     { fill: rgba(124, 58,  237, 0.05); }
.hex-cell.biome-ruins    { fill: rgba(146, 64,  14,  0.06); }

/* Unexplored — solid beige parchment #AC9362 */
.hex-cell.unexplored {
  fill:         #AC9362 !important;
  stroke:       rgba(100, 76, 32, 0.55) !important;
  stroke-width: 2 !important;
  cursor:       default !important;
  filter:       none !important;
}

/* Hover */
.hex-cell.hex-hover {
  stroke:       rgba(255, 255, 255, 0.38);
  stroke-width: 3;
  filter:       brightness(1.35);
}

/* Selected (detail panel open) */
.hex-cell.selected {
  stroke:       var(--accent-cyan) !important;
  stroke-width: 3.5 !important;
  filter:       brightness(1.2) drop-shadow(0 0 7px rgba(34, 211, 238, 0.45));
}

/* Ghost hex shown while dragging */
.hex-drag-ghost {
  fill:             rgba(34, 211, 238, 0.12);
  stroke:           rgba(34, 211, 238, 0.8);
  stroke-width:     2;
  stroke-dasharray: 5 3;
  animation:        ghostPulse 0.9s ease-in-out infinite;
  pointer-events:   none;
}

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

/* Crosshair cursor in edit mode */
body.edit-mode #map-svg        { cursor: crosshair; }
body.edit-mode #map-svg:active { cursor: crosshair; }

/* Biome legend highlight — glow-blue */
.hex-cell.glow-blue {
  animation: glowBluePulse 2s ease-in-out infinite;
}


@keyframes glowBluePulse {
  0%, 100% {
    stroke:       rgba(34, 211, 238, 0.45);
    stroke-width: 1.8;
    filter:       none;
  }
  50% {
    stroke:       rgba(34, 211, 238, 1);
    stroke-width: 3.5;
    filter:       drop-shadow(0 0 9px rgba(34, 211, 238, 0.75));
  }
}

/* ===========================================================
   SVG PROGRESS GROUP TRANSITION
   =========================================================== */
.hex-progress-group {
  transition: opacity 0.18s ease;
}

/* Blink red overlay (separate SVG element) */
.hex-blink-overlay {
  fill:           rgba(239, 68, 68, 0);
  stroke:         none;
  pointer-events: none;
  animation:      blinkRedPulse 2s ease-in-out infinite;
}

@keyframes blinkRedPulse {
  0%, 100% { fill: rgba(239, 68, 68, 0);    }
  50%       { fill: rgba(239, 68, 68, 0.42); }
}

/* ===========================================================
   HEX LABELS (SVG text)
   =========================================================== */
.hex-label {
  font-family:       'Inter', sans-serif;
  font-size:         8.5px;
  font-weight:       600;
  text-anchor:       middle;
  dominant-baseline: middle;
  fill:              rgba(255, 255, 255, 0);
  stroke:            rgba(0, 0, 0, 0);
  stroke-width:      3px;
  paint-order:       stroke;
  pointer-events:    none;
  letter-spacing:    0.4px;
  transition:        fill 0.18s ease;
}

.hex-label.always-visible,
.hex-label.hover-visible {
  fill:   rgba(255, 255, 255, 0.96);
  stroke: rgba(0, 0, 0, 0.75);
}

.hex-label.hidden {
  fill:   transparent !important;
  stroke: transparent !important;
}

/* ===========================================================
   LEFT SIDEBAR — BIOME LEGEND
   =========================================================== */
#sidebar-left {
  position:         absolute;
  left:             0;
  top:              0;
  bottom:           0;
  width:            var(--sidebar-left-w);
  min-width:        var(--sidebar-left-w);
  background:       var(--bg-panel);
  border-right:     1px solid var(--border-subtle);
  backdrop-filter:  var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index:          50;
  display:          flex;
  flex-direction:   column;
  padding:          12px 14px 16px;
  box-shadow:       4px 0 28px rgba(0, 0, 0, 0.4);
  overflow:         hidden;
  transition:       width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar */
#sidebar-left.collapsed {
  width:     34px;
  min-width: 34px;
  padding:   10px 4px;
}

#sidebar-left.collapsed #biome-legend,
#sidebar-left.collapsed .sidebar-footer {
  opacity:        0;
  pointer-events: none;
}

/* Sidebar header row (title + toggle button) */
.sidebar-left-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   14px;
  padding-bottom:  10px;
  border-bottom:   1px solid var(--border-subtle);
  flex-shrink:     0;
  white-space:     nowrap;
  min-width:       0;
}

.sidebar-toggle-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      rgba(255, 255, 255, 0.04);
  color:           var(--text-muted);
  font-size:       10px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
  line-height:     1;
}

.sidebar-toggle-btn:hover {
  background:   var(--accent-cyan-dim);
  border-color: var(--border-glow);
  color:        var(--accent-cyan);
}

.sidebar-title {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  flex:           1;
  min-width:      0;
}

#biome-legend {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  overflow-y:     auto;
  flex:           1;
}

.legend-item {
  display:     flex;
  align-items: center;
  gap:         9px;
  padding:     7px 9px;
  border-radius: var(--radius-md);
  cursor:      pointer;
  transition:  all var(--transition-fast);
  border:      1px solid transparent;
}

.legend-item:hover {
  background:   rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.15);
}

.legend-item.active {
  background:   rgba(34, 211, 238, 0.1);
  border-color: var(--accent-cyan);
}

.legend-dot {
  width:      11px;
  height:     11px;
  border-radius: 50%;
  flex-shrink: 0;
  border:     1px solid rgba(255,255,255,0.15);
}

.legend-text {
  font-size:  12.5px;
  color:      var(--text-secondary);
  font-weight: 500;
}

.legend-item.active .legend-text { color: var(--accent-cyan); }

/* Sidebar footer */
.sidebar-footer {
  margin-top:    auto;
  padding-top:   14px;
  border-top:    1px solid var(--border-subtle);
}

.sidebar-stat-label {
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--text-muted);
  margin-bottom:  3px;
}

.sidebar-stat-value {
  font-size:   24px;
  font-weight: 700;
  color:       var(--accent-cyan);
  line-height: 1;
}

.sidebar-stat-sub {
  font-size: 11px;
  color:     var(--text-muted);
  margin-top: 2px;
}

/* ===========================================================
   RIGHT SIDEBAR — DETAIL PANEL
   =========================================================== */
#sidebar-right {
  position:         absolute;
  right:            0;
  top:              0;
  bottom:           0;
  width:            var(--sidebar-right-w);
  background:       var(--bg-panel);
  border-left:      1px solid var(--border-subtle);
  backdrop-filter:  var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  z-index:          50;
  display:          flex;
  flex-direction:   column;
  box-shadow:       -4px 0 28px rgba(0, 0, 0, 0.4);
  transform:        translateX(100%);
  transition:       transform var(--transition-slow);
}

#sidebar-right.open { transform: translateX(0); }

/* Detail panel header */
#detail-panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px;
  border-bottom:   1px solid var(--border-subtle);
  flex-shrink:     0;
}

#detail-panel-header h3 {
  font-family:    'Cinzel', serif;
  font-size:      10px;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}

#btn-close-detail {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-muted);
  font-size:       14px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
}

#btn-close-detail:hover {
  background:   rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color:        #ef4444;
}

/* Detail tabs */
#detail-tabs {
  display:       flex;
  gap:           1px;
  padding:       8px 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink:   0;
}

.detail-tab-btn {
  flex:          1;
  padding:       7px 2px;
  border:        none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background:    transparent;
  color:         var(--text-muted);
  font-size:     10.5px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  white-space:   nowrap;
}

.detail-tab-btn:hover {
  color:      var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.detail-tab-btn.active {
  color:             var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* Detail content */
#detail-content {
  flex:      1;
  overflow-y: auto;
  padding:   18px;
}

/* ---- Detail: General tab ---- */
.detail-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          280px;
  text-align:      center;
  color:           var(--text-muted);
  gap:             14px;
}

.placeholder-icon {
  font-size: 52px;
  opacity:   0.35;
  filter:    grayscale(0.3);
}

.detail-placeholder p {
  font-size:   13px;
  line-height: 1.65;
  max-width:   200px;
}

.detail-header { margin-bottom: 20px; }

.detail-hex-name {
  font-family:   'Cinzel', serif;
  font-size:     19px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 10px;
  line-height:   1.3;
}

.detail-biome-badge {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     4px 12px;
  border-radius: var(--radius-full);
  border:      1px solid;
  font-size:   12px;
  font-weight: 500;
}

.detail-section { margin-bottom: 18px; }

.detail-label {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--text-muted);
  margin-bottom:  6px;
}

.detail-value {
  font-size: 13px;
  color:     var(--text-secondary);
}

/* Difficulty bar */
.difficulty-bar {
  display:       flex;
  gap:           3px;
  margin-bottom: 4px;
}

.diff-pip {
  width:         18px;
  height:        5px;
  border-radius: 3px;
  background:    rgba(255, 255, 255, 0.08);
  transition:    background var(--transition-fast);
}

.diff-pip.active {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange));
}

.biome-tags   { display: flex; flex-wrap: wrap; gap: 6px; }

.biome-tag {
  padding:       3px 9px;
  border-radius: var(--radius-full);
  font-size:     11px;
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid var(--border-subtle);
  color:         var(--text-secondary);
}

.explored-badge {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     4px 10px;
  background:  rgba(74, 222, 128, 0.1);
  border:      1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-full);
  color:       var(--accent-green);
  font-size:   12px;
}

/* Count boxes */
.detail-counts {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   7px;
  margin-top:            18px;
  padding-top:           16px;
  border-top:            1px solid var(--border-subtle);
}

.count-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        10px 4px;
  background:     rgba(255, 255, 255, 0.025);
  border-radius:  var(--radius-md);
  border:         1px solid var(--border-subtle);
  transition:     all var(--transition-fast);
}

.count-item:hover {
  background:   var(--accent-cyan-dim);
  border-color: var(--border-glow);
}

.count-num {
  font-size:   20px;
  font-weight: 700;
  color:       var(--accent-cyan);
  line-height: 1;
}

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

/* ---- Detail: Pokémon tab ---- */
.pokemon-detail-list {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   10px;
}

.pokemon-detail-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        14px 10px;
  background:     var(--bg-card);
  border:         1px solid var(--border-subtle);
  border-radius:  var(--radius-md);
  cursor:         default;
  transition:     all var(--transition-fast);
}

.pokemon-detail-card:hover {
  border-color: var(--border-glow);
  background:   var(--bg-hover);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px rgba(0, 0, 0, 0.35);
}

.pokemon-sprite-wrap {
  width:           64px;
  height:          64px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255, 255, 255, 0.03);
  border-radius:   var(--radius-md);
}

.pokemon-sprite-img {
  width:            58px;
  height:           58px;
  image-rendering:  pixelated;
  filter:           drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}

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

.pokemon-detail-emoji { font-size: 14px; }

.pokemon-detail-name {
  font-size:   12px;
  font-weight: 600;
  color:       var(--text-primary);
  text-align:  center;
}

.pokemon-detail-id {
  font-size: 10px;
  color:     var(--text-muted);
}

/* ---- Detail: Entity cards (NPC/Event/Location) ---- */
.detail-entity-card {
  padding:       14px;
  background:    var(--bg-card);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition:    all var(--transition-fast);
}

.detail-entity-card:hover {
  border-color: var(--border-glow);
  background:   var(--bg-hover);
}

.entity-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 8px;
}

.entity-emoji { font-size: 22px; }

.entity-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  flex:        1;
}

.entity-description {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.55;
}

.entity-description.dialogue {
  font-family: 'Crimson Pro', serif;
  font-style:  italic;
  font-size:   14px;
  color:       var(--text-secondary);
  padding-left: 12px;
  border-left: 2px solid var(--accent-cyan);
}

.empty-state {
  text-align: center;
  color:      var(--text-muted);
  font-size:  13px;
  padding:    40px 16px;
  line-height: 1.6;
}

/* ===========================================================
   POKÉMON SEARCH MODAL
   =========================================================== */
#pokemon-search-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity var(--transition-md);
}

#pokemon-search-modal.open {
  opacity:        1;
  pointer-events: all;
}

#pokemon-search-content {
  width:          540px;
  max-width:      94vw;
  max-height:     80vh;
  background:     var(--bg-panel);
  border:         1px solid rgba(168, 85, 247, 0.2);
  border-radius:  var(--radius-xl);
  box-shadow:     var(--panel-shadow), 0 0 50px rgba(168, 85, 247, 0.12);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  animation:      modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

#pokemon-search-header {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         16px 20px;
  border-bottom:   1px solid var(--border-subtle);
  flex-shrink:     0;
}

#pokemon-search-header h2 {
  font-family: 'Cinzel', serif;
  font-size:   15px;
  font-weight: 700;
  color:       var(--text-primary);
  flex:        1;
}

#btn-close-pokemon-search {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-muted);
  font-size:       15px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
}

#btn-close-pokemon-search:hover {
  background:   rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color:        #ef4444;
}

#pokemon-search-input-wrap {
  padding:       12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink:   0;
}

#pokemon-search-input {
  width:       100%;
  padding:     10px 14px;
  background:  rgba(255, 255, 255, 0.05);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color:       var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size:   14px;
  transition:  all var(--transition-fast);
}

#pokemon-search-input:focus {
  outline:    none;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.05);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

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

#pokemon-search-results {
  flex:           1;
  overflow-y:     auto;
  padding:        10px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.pokemon-search-item {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       10px 14px;
  background:    var(--bg-card);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    all var(--transition-fast);
}

.pokemon-search-item:hover {
  border-color: rgba(168, 85, 247, 0.3);
  background:   rgba(168, 85, 247, 0.06);
  transform:    translateX(4px);
}

.search-pokemon-sprite {
  width:            52px;
  height:           52px;
  image-rendering:  pixelated;
  filter:           drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
  flex-shrink:      0;
}

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

.search-pokemon-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}

.search-pokemon-id {
  font-size: 11px;
  color:     var(--text-muted);
}

.search-pokemon-loc {
  font-size:   11px;
  color:       var(--accent-cyan);
  margin-top:  1px;
}

.search-arrow {
  font-size: 14px;
  color:     var(--text-muted);
  flex-shrink: 0;
}

.pokemon-search-item:hover .search-arrow { color: var(--accent-purple); }

.search-empty {
  text-align: center;
  color:      var(--text-muted);
  padding:    32px;
  font-size:  13px;
  line-height: 1.6;
}

/* ===========================================================
   TOAST NOTIFICATION
   =========================================================== */
#toast {
  position:       fixed;
  bottom:         28px;
  left:           50%;
  transform:      translateX(-50%) translateY(16px);
  background:     var(--bg-card);
  border:         1px solid var(--border-glow);
  border-radius:  var(--radius-md);
  padding:        10px 22px;
  font-size:      13px;
  font-weight:    500;
  color:          var(--text-primary);
  opacity:        0;
  pointer-events: none;
  transition:     all var(--transition-md);
  z-index:        999;
  box-shadow:     var(--panel-shadow);
  backdrop-filter: var(--panel-blur);
  white-space:    nowrap;
}

#toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================================================
   SCROLLBAR
   =========================================================== */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255, 255, 255, 0.09); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255, 255, 255, 0.18); }

/* ===========================================================
   BIOME EDITOR MODAL
   =========================================================== */
#biome-editor-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:         250;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.22s ease;
}
#biome-editor-modal.open { opacity: 1; pointer-events: all; }

#biome-editor-content {
  width:          640px;
  max-width:      96vw;
  max-height:     88vh;
  background:     var(--bg-panel);
  border:         1px solid rgba(74, 222, 128, 0.18);
  border-radius:  var(--radius-xl);
  box-shadow:     var(--panel-shadow), 0 0 40px rgba(74, 222, 128, 0.07);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  animation:      modalSlideIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#biome-editor-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background:    rgba(74, 222, 128, 0.05);
  flex-shrink:   0;
}

#biome-editor-header h2 {
  font-family:    'Cinzel', serif;
  font-size:      15px;
  font-weight:    700;
  color:          var(--text-primary);
  flex:           1;
}

#btn-close-biome-editor {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-muted);
  font-size:       15px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
}
#btn-close-biome-editor:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }

#biome-editor-body {
  flex:      1;
  overflow-y: auto;
  padding:   18px 20px;
  display:   flex;
  flex-direction: column;
  gap:       14px;
}

.biome-editor-intro {
  font-size:   13px;
  color:       var(--text-muted);
  line-height: 1.55;
  padding:     10px 14px;
  background:  rgba(74, 222, 128, 0.05);
  border:      1px solid rgba(74, 222, 128, 0.12);
  border-radius: var(--radius-md);
}

#biome-list {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.biome-edit-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 10px;
  background:  rgba(255, 255, 255, 0.025);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition:  background var(--transition-fast);
}
.biome-edit-row:hover { background: rgba(255, 255, 255, 0.045); }

.biome-edit-color {
  width:        38px;
  height:       34px;
  border:       1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background:   none;
  cursor:       pointer;
  padding:      2px;
  flex-shrink:  0;
}

.biome-edit-emoji {
  max-width:  62px !important;
  text-align: center;
  flex-shrink: 0;
}

.biome-edit-label { flex: 1; }

.biome-edit-key {
  font-size:     10.5px;
  color:         var(--text-muted);
  font-family:   monospace;
  background:    rgba(255, 255, 255, 0.05);
  padding:       2px 7px;
  border-radius: var(--radius-xs);
  flex-shrink:   0;
  white-space:   nowrap;
}

#biome-add-section {
  padding:       14px;
  border:        1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.biome-add-row {
  display:  flex;
  gap:      8px;
  align-items: center;
  flex-wrap: wrap;
}

#biome-editor-footer {
  padding:         14px 20px;
  border-top:      1px solid var(--border-subtle);
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  background:      rgba(0, 0, 0, 0.18);
  flex-shrink:     0;
}

#btn-save-biomes {
  padding:       9px 22px;
  border:        1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-md);
  background:    rgba(74, 222, 128, 0.1);
  color:         var(--accent-green);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}
#btn-save-biomes:hover { background: rgba(74, 222, 128, 0.18); box-shadow: 0 0 14px rgba(74, 222, 128, 0.2); }

/* ===========================================================
   BACKGROUND ART MODAL
   =========================================================== */
#bg-art-modal {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:         250;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.22s ease;
}
#bg-art-modal.open { opacity: 1; pointer-events: all; }

#bg-art-content {
  width:          520px;
  max-width:      94vw;
  max-height:     88vh;
  background:     var(--bg-panel);
  border:         1px solid rgba(249, 115, 22, 0.18);
  border-radius:  var(--radius-xl);
  box-shadow:     var(--panel-shadow), 0 0 40px rgba(249, 115, 22, 0.08);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  animation:      modalSlideIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#bg-art-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background:    rgba(249, 115, 22, 0.04);
  flex-shrink:   0;
}

#bg-art-header h2 {
  font-family: 'Cinzel', serif;
  font-size:   15px;
  font-weight: 700;
  color:       var(--text-primary);
  flex:        1;
}

#btn-close-bg-art {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  border:          1px solid var(--border-subtle);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-muted);
  font-size:       15px;
  cursor:          pointer;
  transition:      all var(--transition-fast);
}
#btn-close-bg-art:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #ef4444; }

#bg-art-body {
  flex:      1;
  overflow-y: auto;
  padding:   20px;
  display:   flex;
  flex-direction: column;
  gap:       16px;
}

.bg-art-intro {
  font-size:   13px;
  color:       var(--text-secondary);
  line-height: 1.6;
}

.bg-section { display: flex; flex-direction: column; gap: 8px; }

.bg-section-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-muted);
}

.bg-divider { padding-top: 14px; border-top: 1px solid var(--border-subtle); }

.bg-input-row {
  display: flex;
  gap:     8px;
}

.btn-file-label {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 16px;
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color:         var(--text-secondary);
  font-size:     13px;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  width:         fit-content;
}
.btn-file-label:hover { background: var(--accent-orange-dim); border-color: var(--border-orange); color: var(--accent-orange); }

.bg-preview-label {
  font-size:     10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:         var(--text-muted);
  margin-bottom: 6px;
}

#bg-preview-img {
  width:         100%;
  max-height:    160px;
  object-fit:    cover;
  border-radius: var(--radius-md);
  border:        1px solid var(--border-subtle);
}

.btn-remove-bg {
  padding:       9px 16px;
  border:        1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  background:    rgba(239, 68, 68, 0.08);
  color:         #f87171;
  font-size:     13px;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  width:         fit-content;
}
.btn-remove-bg:hover { background: rgba(239, 68, 68, 0.16); box-shadow: 0 0 12px rgba(239,68,68,0.2); }

#bg-art-footer {
  padding:         14px 20px;
  border-top:      1px solid var(--border-subtle);
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  background:      rgba(0, 0, 0, 0.18);
  flex-shrink:     0;
}

#btn-apply-bg {
  padding:       9px 22px;
  border:        1px solid var(--border-orange);
  border-radius: var(--radius-md);
  background:    var(--accent-orange-dim);
  color:         var(--accent-orange);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}
#btn-apply-bg:hover { background: rgba(249, 115, 22, 0.2); box-shadow: 0 0 14px var(--accent-orange-glow); }

/* ===========================================================
   BG IMAGE TRANSFORM CONTROLS
   =========================================================== */
.bg-transform-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  8px;
}

.bg-transform-label {
  font-size:   11px;
  color:       var(--text-muted);
  width:       52px;
  flex-shrink: 0;
}

.bg-range {
  flex:             1;
  -webkit-appearance: none;
  height:           4px;
  border-radius:    4px;
  background:       rgba(255,255,255,0.12);
  outline:          none;
  cursor:           pointer;
}

.bg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--accent-orange);
  border:        2px solid rgba(0,0,0,0.4);
  cursor:        pointer;
  transition:    transform 0.15s ease;
}

.bg-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

.bg-range-val {
  font-size:   11px;
  color:       var(--accent-orange);
  font-weight: 600;
  min-width:   36px;
  text-align:  right;
  font-variant-numeric: tabular-nums;
}

/* Editable number input beside transform sliders */
.bg-num-input {
  width:              52px;
  padding:            4px 6px;
  background:         rgba(249, 115, 22, 0.08);
  border:             1px solid rgba(249, 115, 22, 0.28);
  border-radius:      var(--radius-sm);
  color:              var(--accent-orange);
  font-size:          12px;
  font-weight:        600;
  font-family:        'Inter', monospace, sans-serif;
  text-align:         center;
  outline:            none;
  transition:         border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance:    textfield;
}

.bg-num-input::-webkit-inner-spin-button,
.bg-num-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bg-num-input:focus {
  border-color: var(--accent-orange);
  box-shadow:   0 0 8px rgba(249, 115, 22, 0.25);
}

.bg-num-unit {
  font-size:   11px;
  color:       var(--text-muted);
  flex-shrink: 0;
}

/* ===========================================================
   EDIT MODE BANNER
   =========================================================== */
#edit-mode-banner {
  display:         none;
  align-items:     center;
  gap:             12px;
  padding:         7px 18px;
  background:      linear-gradient(90deg, rgba(234,179,8,0.13) 0%, rgba(234,179,8,0.06) 100%);
  border-bottom:   1px solid rgba(234,179,8,0.28);
  font-size:       12px;
  flex-shrink:     0;
  animation:       bannerSlideIn 0.22s ease;
}

body.edit-mode #edit-mode-banner { display: flex; }

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

.edit-banner-icon { font-size: 15px; flex-shrink: 0; }

.edit-banner-text {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  min-width:   0;
  flex-wrap:   wrap;
}

.edit-banner-text strong {
  color:         rgba(234,179,8,0.9);
  font-size:     12px;
  letter-spacing: 0.5px;
  flex-shrink:   0;
}

.edit-banner-tips {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.edit-tip {
  color:      var(--text-secondary);
  font-size:  11px;
  white-space: nowrap;
}

.edit-tip-sep {
  color:     var(--text-muted);
  font-size: 11px;
}

#edit-banner-close {
  padding:       4px 12px;
  border:        1px solid rgba(234,179,8,0.35);
  border-radius: var(--radius-sm);
  background:    rgba(234,179,8,0.1);
  color:         rgba(234,179,8,0.85);
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    all 0.15s ease;
}
#edit-banner-close:hover {
  background:  rgba(234,179,8,0.22);
  border-color: rgba(234,179,8,0.6);
}

/* ===========================================================
   BOTTOM STATUS BAR
   =========================================================== */
#status-bar {
  height:        26px;
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       0 16px;
  background:    rgba(6, 6, 16, 0.92);
  border-top:    1px solid var(--border-subtle);
  font-size:     11px;
  color:         var(--text-muted);
}

.status-item {
  display:     flex;
  align-items: center;
  gap:         5px;
  white-space: nowrap;
}

.status-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
}
.view-dot  { background: var(--accent-cyan); box-shadow: 0 0 5px rgba(34,211,238,0.5); }
.edit-dot  { background: rgba(234,179,8,0.9); box-shadow: 0 0 5px rgba(234,179,8,0.5); }

#status-zoom, #status-hex-count { color: var(--text-secondary); font-weight: 600; }
#status-mode-label { color: var(--text-secondary); }

.status-sep  { color: var(--border-subtle); font-size: 14px; }
.status-hint { color: var(--text-muted); font-size: 10px; margin-left: auto; }

/* ===========================================================
   IMPROVED PLACEHOLDER (right sidebar empty state)
   =========================================================== */
.placeholder-title {
  font-family:    'Cinzel', serif;
  font-size:      13px;
  font-weight:    600;
  color:          var(--text-secondary);
  margin-bottom:  6px;
}

.placeholder-sub {
  font-size:    12px;
  color:        var(--text-muted);
  line-height:  1.55;
  margin-bottom: 18px;
}

.placeholder-tips {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            8px;
  width:          100%;
}

.placeholder-tip {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       7px 10px;
  background:    rgba(255,255,255,0.03);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size:     11px;
  color:         var(--text-muted);
}

.ptip-key {
  padding:       2px 7px;
  background:    rgba(255,255,255,0.07);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-size:     10px;
  font-weight:   600;
  color:         var(--text-secondary);
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ===========================================================
   TOOLBAR — icon-only variant
   =========================================================== */
.toolbar-btn-icon {
  min-width:    32px;
  padding:      6px 10px;
  font-size:    14px;
  font-weight:  700;
}

/* ===========================================================
   HELP MODAL
   =========================================================== */
#help-modal {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.65);
  z-index:    2000;
  display:    flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation:  fadeInOverlay 0.18s ease;
}

#help-modal-content {
  background:    var(--bg-panel);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:    0 24px 80px rgba(0,0,0,0.7);
  width:         520px;
  max-width:     92vw;
  max-height:    80vh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}

#help-modal-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink:   0;
}

#help-modal-header h2 {
  flex:          1;
  font-family:   'Cinzel', serif;
  font-size:     15px;
  color:         var(--text-primary);
}

#btn-close-help {
  width:         28px;
  height:        28px;
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background:    transparent;
  color:         var(--text-muted);
  font-size:     13px;
  cursor:        pointer;
  transition:    all var(--transition-fast);
}
#btn-close-help:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #f87171; }

#help-modal-body {
  padding:    20px;
  overflow-y: auto;
  display:    flex;
  flex-direction: column;
  gap:        20px;
}

.help-section h3 {
  font-size:     12px;
  font-weight:   700;
  color:         var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.help-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
}

.help-table tr { border-bottom: 1px solid var(--border-subtle); }
.help-table tr:last-child { border-bottom: none; }

.help-table td {
  padding:    7px 10px;
  color:      var(--text-secondary);
  vertical-align: middle;
}

.help-table td:first-child { width: 40%; }

.help-table kbd {
  display:       inline-block;
  padding:       3px 8px;
  background:    rgba(255,255,255,0.07);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  font-family:   'Inter', monospace;
  font-size:     11px;
  font-weight:   600;
  color:         var(--text-primary);
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===========================================================
   POKÉDEX MODAL — TABS
   =========================================================== */
#pokedex-tabs {
  display:     flex;
  gap:         4px;
  padding:     10px 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.pokedex-tab {
  padding:       8px 16px;
  border:        none;
  border-bottom: 2px solid transparent;
  background:    transparent;
  color:         var(--text-muted);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all var(--transition-fast);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  letter-spacing: 0.3px;
}

.pokedex-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.04); }
.pokedex-tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }

#pokedex-panel-search,
#pokedex-panel-fakemon {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ===========================================================
   FAKEMON LIST + FORM
   =========================================================== */
.fakemon-entity-list { padding: 10px 16px; }

.fakemon-list-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 12px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border-subtle);
  margin-bottom: 6px;
  background:    rgba(255,255,255,0.02);
}

.fakemon-sprite {
  width:         38px;
  height:        38px;
  object-fit:    contain;
  border-radius: 4px;
  background:    rgba(255,255,255,0.05);
}

.fakemon-no-img {
  font-size:   28px;
  line-height: 38px;
  width:       38px;
  text-align:  center;
  flex-shrink: 0;
}

.fakemon-types-inline { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }

.fakemon-create-form {
  border-top: 1px solid var(--border-subtle);
  padding:    16px;
}

/* Type selector grid */
.fakemon-type-selector {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
}

.fakemon-type-btn {
  padding:       3px 10px;
  border-radius: 999px;
  border:        1px solid transparent;
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  opacity:       0.45;
  transition:    all 0.14s ease;
  background:    rgba(255,255,255,0.06);
  color:         var(--text-secondary);
}

.fakemon-type-btn:hover { opacity: 0.75; }

.fakemon-type-btn.fakemon-type-selected {
  opacity:     1;
  border-color: rgba(255,255,255,0.25);
  box-shadow:  0 0 6px rgba(255,255,255,0.15);
}

/* Type colors reuse existing .pk-type-badge colors via pk-type-badge class cascade */
.fakemon-type-btn.type-fire     { background: rgba(249,115,22,0.2);  color: #fb923c; }
.fakemon-type-btn.type-water    { background: rgba(59,130,246,0.2);  color: #60a5fa; }
.fakemon-type-btn.type-grass    { background: rgba(34,197,94,0.2);   color: #4ade80; }
.fakemon-type-btn.type-electric { background: rgba(234,179,8,0.2);   color: #facc15; }
.fakemon-type-btn.type-psychic  { background: rgba(236,72,153,0.2);  color: #f472b6; }
.fakemon-type-btn.type-ice      { background: rgba(103,232,249,0.2); color: #67e8f9; }
.fakemon-type-btn.type-dragon   { background: rgba(124,58,237,0.2);  color: #a78bfa; }
.fakemon-type-btn.type-dark     { background: rgba(68,64,60,0.4);    color: #a8a29e; }
.fakemon-type-btn.type-fairy    { background: rgba(244,114,182,0.2); color: #f9a8d4; }
.fakemon-type-btn.type-fighting { background: rgba(239,68,68,0.2);   color: #f87171; }
.fakemon-type-btn.type-poison   { background: rgba(168,85,247,0.2);  color: #c084fc; }
.fakemon-type-btn.type-ground   { background: rgba(180,83,9,0.2);    color: #d97706; }
.fakemon-type-btn.type-rock     { background: rgba(120,113,108,0.2); color: #a8a29e; }
.fakemon-type-btn.type-bug      { background: rgba(101,163,13,0.2);  color: #a3e635; }
.fakemon-type-btn.type-ghost    { background: rgba(88,28,135,0.2);   color: #c084fc; }
.fakemon-type-btn.type-steel    { background: rgba(148,163,184,0.2); color: #94a3b8; }
.fakemon-type-btn.type-flying   { background: rgba(147,197,253,0.2); color: #93c5fd; }
.fakemon-type-btn.type-normal   { background: rgba(229,229,229,0.1); color: #d4d4d4; }

/* Photo upload */
.fakemon-photo-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.fakemon-upload-btn {
  padding:       6px 14px;
  background:    rgba(34,211,238,0.1);
  border:        1px solid rgba(34,211,238,0.3);
  border-radius: var(--radius-sm);
  color:         var(--accent-cyan);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all 0.15s ease;
  flex-shrink:   0;
}
.fakemon-upload-btn:hover { background: rgba(34,211,238,0.18); }

.fakemon-photo-name {
  font-size: 11px;
  color:     var(--text-muted);
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width: 160px;
}

.fakemon-photo-preview {
  margin-top: 10px;
}

.fakemon-photo-preview img {
  max-width:     100px;
  max-height:    100px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border-subtle);
  object-fit:    contain;
  background:    rgba(255,255,255,0.04);
}

/* ===========================================================
   ENTITY IMAGE UPLOAD (General / NPCs / Locations)
   =========================================================== */
.entity-img-group { margin-top: 4px; }

.entity-img-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.entity-img-upload-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 14px;
  background:    rgba(34,211,238,0.08);
  border:        1px solid rgba(34,211,238,0.25);
  border-radius: var(--radius-sm);
  color:         var(--accent-cyan);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all 0.15s ease;
  flex-shrink:   0;
}
.entity-img-upload-btn:hover { background: rgba(34,211,238,0.16); border-color: rgba(34,211,238,0.5); }

.entity-img-name {
  font-size:   11px;
  color:       var(--text-muted);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:   180px;
}

.entity-img-preview {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  margin-top:    10px;
}

.entity-img-preview img {
  max-width:     120px;
  max-height:    120px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border-subtle);
  object-fit:    contain;
  background:    rgba(255,255,255,0.04);
}

.entity-img-remove {
  width:         24px;
  height:        24px;
  border:        1px solid rgba(239,68,68,0.35);
  border-radius: var(--radius-sm);
  background:    rgba(239,68,68,0.1);
  color:         #f87171;
  font-size:     11px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all 0.15s ease;
  flex-shrink:   0;
}
.entity-img-remove:hover { background: rgba(239,68,68,0.25); }

/* Thumbnail shown in NPC / Location list items */
.entity-list-thumb {
  width:         36px;
  height:        36px;
  border-radius: 4px;
  object-fit:    cover;
  background:    rgba(255,255,255,0.06);
  border:        1px solid var(--border-subtle);
  flex-shrink:   0;
}

/* Fakemon badge and placeholder in Busca Regional */
.search-fakemon-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  padding:       1px 7px;
  border-radius: 999px;
  background:    rgba(168,85,247,0.18);
  border:        1px solid rgba(168,85,247,0.35);
  color:         #c084fc;
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 0.4px;
}

.search-fakemon-placeholder {
  width:         40px;
  height:        40px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     24px;
  background:    rgba(168,85,247,0.1);
  border:        1px solid rgba(168,85,247,0.2);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

/* Search section header (separates regional hits from standalone fakemons) */
.search-section-header {
  padding:        8px 16px 5px;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          #c084fc;
  border-top:     1px solid rgba(168,85,247,0.15);
  margin-top:     6px;
}

/* Fakemon sprite in search — object-fit contain, subtle purple tint */
.search-fakemon-sprite {
  object-fit: contain !important;
  background: rgba(168,85,247,0.08) !important;
  border:     1px solid rgba(168,85,247,0.2) !important;
}

/* Standalone fakemon row */
.fakemon-search-row          { cursor: default; }
.fakemon-search-row:hover    { background: rgba(168,85,247,0.06); }

/* Types row inside fakemon search item */
.search-fakemon-types {
  display:    flex;
  gap:        4px;
  flex-wrap:  wrap;
  margin-top: 3px;
}

/* Fakemon edit button */
.fakemon-edit-btn {
  padding:       3px 9px !important;
  font-size:     13px !important;
  background:    rgba(234,179,8,0.1) !important;
  border:        1px solid rgba(234,179,8,0.3) !important;
  color:         rgba(234,179,8,0.9) !important;
  border-radius: var(--radius-sm) !important;
  cursor:        pointer !important;
  transition:    all 0.15s ease !important;
  margin-right:  4px;
}
.fakemon-edit-btn:hover {
  background: rgba(234,179,8,0.22) !important;
  border-color: rgba(234,179,8,0.6) !important;
}

/* Edit form in editing state — subtle yellow glow */
.fakemon-create-form:has(#btn-save-fakemon-edit) {
  border-color: rgba(234,179,8,0.3);
  box-shadow:   0 0 0 1px rgba(234,179,8,0.12);
}

/* ===========================================================
   PASSWORD MODAL
   =========================================================== */
#password-modal {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.25s ease;
  pointer-events:  none;
}
#password-modal.open {
  opacity:        1;
  pointer-events: all;
}

#password-modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#password-modal-box {
  position:      relative;
  z-index:       1;
  background:    rgba(15,23,42,0.92);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding:       40px 36px 32px;
  width:         360px;
  max-width:     92vw;
  text-align:    center;
  box-shadow:    0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  transform:     translateY(24px) scale(0.96);
  transition:    transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: blur(20px);
}
#password-modal.open #password-modal-box {
  transform: translateY(0) scale(1);
}

#password-modal-icon {
  font-size:   48px;
  line-height: 1;
  margin-bottom: 14px;
  animation:   pw-icon-pulse 2s ease-in-out infinite;
}
@keyframes pw-icon-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(34,211,238,0)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(34,211,238,0.5)); }
}

#password-modal-title {
  font-size:     20px;
  font-weight:   700;
  color:         var(--text-primary);
  margin:        0 0 6px;
  letter-spacing: -0.3px;
}

#password-modal-sub {
  font-size:  13px;
  color:      var(--text-muted);
  margin:     0 0 22px;
  line-height: 1.5;
}

#password-input-wrap {
  margin-bottom: 18px;
}

#password-input-wrap .edit-input {
  text-align:  center;
  font-size:   16px;
  letter-spacing: 3px;
  width:       100%;
  box-sizing:  border-box;
}

#password-error {
  margin-top:  8px;
  font-size:   12px;
  color:       #f87171;
  font-weight: 600;
  min-height:  18px;
}

#password-modal-actions {
  display: flex;
  gap:     10px;
}
#password-modal-actions .btn-cancel { flex: 1; }
#password-modal-actions .btn-add    { flex: 2; }

/* Shake animation for wrong password */
@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}
.pw-shake { animation: pw-shake 0.45s ease; }

/* ===========================================================
   RARITY BADGE (edit list + detail panel)
   =========================================================== */
.rarity-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 9px;
  border-radius: 999px;
  border:        1px solid transparent;
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink:   0;
}

/* ===========================================================
   RECURSO DETAIL CARD
   =========================================================== */
.recurso-card { padding: 0 !important; overflow: hidden; }

.recurso-card-inner {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     14px 16px;
}

.recurso-img-wrap {
  flex-shrink: 0;
  width:       72px;
  height:      72px;
  border-radius: var(--radius-sm);
  overflow:    hidden;
  background:  rgba(255,255,255,0.04);
  border:      1px solid var(--border-subtle);
  display:     flex;
  align-items: center;
  justify-content: center;
}

.recurso-detail-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.recurso-no-img {
  font-size: 32px;
  line-height: 1;
}

.recurso-info {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.recurso-name {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text-primary);
}

/* Location image in detail panel */
.detail-entity-img {
  width:         100%;
  max-height:    140px;
  object-fit:    cover;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display:       block;
  margin-bottom: 2px;
}

/* Hex general image banner */
.detail-hex-banner {
  width:         100%;
  max-height:    180px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  display:       block;
  margin:        0 0 12px;
  border:        1px solid var(--border-subtle);
}