/* Block Picker Panel - in controls section */
.block-picker-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 300px;
}

.block-picker-header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.block-picker-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.85rem;
}

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

.block-picker-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--color-code-bg);
  border-bottom: 1px solid var(--color-border);
}

.block-picker-tab {
  flex: 1;
  padding: 0.5rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-code-bg);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  transition: all 0.15s;
}

.block-picker-tab:last-child {
  border-right: none;
}

.block-picker-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.block-picker-tab.active {
  color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.block-picker-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-surface);
}

.block-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.block-picker-cell {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  background-size: cover;
  image-rendering: pixelated;
}

/* ==================== STONE BLOCKS ==================== */

/* Stone - gray with subtle noise pattern */
.block-texture-stone {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px),
    linear-gradient(135deg, #858585 25%, #7d7d7d 50%, #757575 75%);
}

/* Cobblestone - irregular stone pattern */
.block-texture-cobblestone {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, #5a5a5a 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 70% 20%, #6b6b6b 0%, transparent 45%),
    radial-gradient(ellipse 45% 55% at 40% 70%, #5e5e5e 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 80% 75%, #626262 0%, transparent 45%),
    linear-gradient(135deg, #727272 0%, #6b6b6b 50%, #636363 100%);
}

/* Stone Bricks - brick pattern */
.block-texture-stone_bricks {
  background:
    linear-gradient(to right, #555 0px, #555 1px, transparent 1px, transparent 100%),
    linear-gradient(to bottom, #555 0px, #555 1px, transparent 1px, transparent 100%),
    repeating-linear-gradient(to right, transparent 0%, transparent 48%, #555 48%, #555 52%, transparent 52%, transparent 100%),
    linear-gradient(135deg, #7e7e7e 0%, #7a7a7a 50%, #767676 100%);
  background-size: 50% 50%, 100% 50%, 100% 50%, 100% 100%;
}

/* Deepslate - dark layered stone */
.block-texture-deepslate {
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.3) 3px, rgba(0,0,0,0.3) 4px),
    linear-gradient(180deg, #555 0%, #4d4d4d 50%, #454545 100%);
}

/* Granite - pink/orange speckled */
.block-texture-granite {
  background:
    radial-gradient(circle 2px at 15% 25%, #6a4535 100%, transparent 100%),
    radial-gradient(circle 2px at 45% 15%, #b08060 100%, transparent 100%),
    radial-gradient(circle 2px at 75% 45%, #6a4535 100%, transparent 100%),
    radial-gradient(circle 1.5px at 25% 65%, #b08060 100%, transparent 100%),
    radial-gradient(circle 2px at 85% 85%, #6a4535 100%, transparent 100%),
    radial-gradient(circle 1.5px at 55% 75%, #b08060 100%, transparent 100%),
    linear-gradient(135deg, #a07050 0%, #9a6c50 50%, #8a5c40 100%);
}

/* Diorite - light gray with white spots */
.block-texture-diorite {
  background:
    radial-gradient(circle 2px at 20% 20%, #e0e0e0 100%, transparent 100%),
    radial-gradient(circle 2px at 60% 30%, #888 100%, transparent 100%),
    radial-gradient(circle 2px at 40% 60%, #e0e0e0 100%, transparent 100%),
    radial-gradient(circle 2px at 80% 70%, #888 100%, transparent 100%),
    radial-gradient(circle 1.5px at 10% 80%, #e0e0e0 100%, transparent 100%),
    radial-gradient(circle 2px at 70% 10%, #888 100%, transparent 100%),
    linear-gradient(135deg, #c5c5c5 0%, #bfbfbf 50%, #b5b5b5 100%);
}

/* Andesite - medium gray speckled */
.block-texture-andesite {
  background:
    radial-gradient(circle 2px at 25% 30%, #707070 100%, transparent 100%),
    radial-gradient(circle 2px at 65% 20%, #9a9a9a 100%, transparent 100%),
    radial-gradient(circle 2px at 35% 70%, #9a9a9a 100%, transparent 100%),
    radial-gradient(circle 1.5px at 85% 60%, #707070 100%, transparent 100%),
    radial-gradient(circle 2px at 15% 85%, #9a9a9a 100%, transparent 100%),
    linear-gradient(135deg, #909090 0%, #8a8a8a 50%, #808080 100%);
}

/* Bricks - red brick pattern */
.block-texture-bricks {
  background:
    repeating-linear-gradient(
      0deg,
      #5a4035 0px, #5a4035 1px,
      transparent 1px, transparent 8px
    ),
    repeating-linear-gradient(
      90deg,
      #5a4035 0px, #5a4035 1px,
      transparent 1px, transparent 12px
    ),
    linear-gradient(135deg, #9a6858 0%, #966453 50%, #8a5a48 100%);
  background-size: 24px 8px, 12px 16px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

/* ==================== NATURE BLOCKS ==================== */

/* Dirt - brown with speckles */
.block-texture-dirt {
  background:
    radial-gradient(circle 1.5px at 20% 25%, #6a4528 100%, transparent 100%),
    radial-gradient(circle 1px at 50% 40%, #a07048 100%, transparent 100%),
    radial-gradient(circle 1.5px at 80% 30%, #6a4528 100%, transparent 100%),
    radial-gradient(circle 1px at 30% 70%, #a07048 100%, transparent 100%),
    radial-gradient(circle 1.5px at 70% 80%, #6a4528 100%, transparent 100%),
    radial-gradient(circle 1px at 10% 60%, #a07048 100%, transparent 100%),
    linear-gradient(180deg, #8b5e3c 0%, #7a5030 100%);
}

/* Grass Block - green top with dirt sides */
.block-texture-grass_block {
  background:
    linear-gradient(180deg,
      #5d9b3a 0%, #5d9b3a 25%,
      #4a7a2e 25%, #4a7a2e 30%,
      #8b5e3c 30%, #7a5030 100%
    );
}

/* Sand - beige with subtle grain */
.block-texture-sand {
  background:
    radial-gradient(circle 1px at 15% 20%, #c8c090 100%, transparent 100%),
    radial-gradient(circle 1px at 45% 35%, #e8e0b0 100%, transparent 100%),
    radial-gradient(circle 1px at 75% 25%, #c8c090 100%, transparent 100%),
    radial-gradient(circle 1px at 25% 65%, #e8e0b0 100%, transparent 100%),
    radial-gradient(circle 1px at 85% 75%, #c8c090 100%, transparent 100%),
    radial-gradient(circle 1px at 55% 85%, #e8e0b0 100%, transparent 100%),
    linear-gradient(180deg, #dbd3a0 0%, #d0c890 100%);
}

/* Gravel - gray pebble pattern */
.block-texture-gravel {
  background:
    radial-gradient(ellipse 4px 3px at 20% 25%, #6a6866 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 55% 20%, #8a8886 100%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 80% 40%, #6a6866 100%, transparent 100%),
    radial-gradient(ellipse 3px 3px at 30% 60%, #8a8886 100%, transparent 100%),
    radial-gradient(ellipse 4px 4px at 65% 75%, #6a6866 100%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 15% 80%, #8a8886 100%, transparent 100%),
    linear-gradient(135deg, #888684 0%, #837f7d 50%, #7a7876 100%);
}

/* Clay - blue-gray smooth */
.block-texture-clay {
  background:
    radial-gradient(circle 2px at 30% 30%, #8a909c 100%, transparent 100%),
    radial-gradient(circle 2px at 70% 60%, #aab0bc 100%, transparent 100%),
    linear-gradient(180deg, #a4aab6 0%, #9ea4b0 50%, #949aa6 100%);
}

/* Mud - dark brown wet look */
.block-texture-mud {
  background:
    radial-gradient(circle 2px at 25% 35%, #2c2a2d 100%, transparent 100%),
    radial-gradient(circle 1.5px at 65% 25%, #4c4a4d 100%, transparent 100%),
    radial-gradient(circle 2px at 45% 75%, #2c2a2d 100%, transparent 100%),
    radial-gradient(circle 1.5px at 85% 65%, #4c4a4d 100%, transparent 100%),
    linear-gradient(180deg, #3c3a3d 0%, #343234 100%);
}

/* ==================== CONCRETE BLOCKS ==================== */
/* Concrete is smooth - just add subtle gradient for depth */

.block-texture-white_concrete { background: linear-gradient(135deg, #d5dbdc 0%, #cfd5d6 50%, #c5cbcc 100%); }
.block-texture-orange_concrete { background: linear-gradient(135deg, #e86a0a 0%, #e06101 50%, #d05800 100%); }
.block-texture-magenta_concrete { background: linear-gradient(135deg, #b338a7 0%, #a9309f 50%, #9a2890 100%); }
.block-texture-light_blue_concrete { background: linear-gradient(135deg, #2c93d1 0%, #2389c7 50%, #1a7fb8 100%); }
.block-texture-yellow_concrete { background: linear-gradient(135deg, #f5b81e 0%, #f0af15 50%, #e5a50c 100%); }
.block-texture-lime_concrete { background: linear-gradient(135deg, #68b220 0%, #5ea818 50%, #549e10 100%); }
.block-texture-pink_concrete { background: linear-gradient(135deg, #df6f98 0%, #d6658f 50%, #cc5b85 100%); }
.block-texture-gray_concrete { background: linear-gradient(135deg, #3f4246 0%, #36393d 50%, #2d3034 100%); }
.block-texture-light_gray_concrete { background: linear-gradient(135deg, #86867c 0%, #7d7d73 50%, #74746a 100%); }
.block-texture-cyan_concrete { background: linear-gradient(135deg, #1a8192 0%, #157788 50%, #106d7e 100%); }
.block-texture-purple_concrete { background: linear-gradient(135deg, #6e28a6 0%, #64209c 50%, #5a1892 100%); }
.block-texture-blue_concrete { background: linear-gradient(135deg, #353899 0%, #2d2f8f 50%, #252685 100%); }
.block-texture-brown_concrete { background: linear-gradient(135deg, #6a3a26 0%, #60331e 50%, #562c16 100%); }
.block-texture-green_concrete { background: linear-gradient(135deg, #52652c 0%, #495b24 50%, #40511c 100%); }
.block-texture-red_concrete { background: linear-gradient(135deg, #982929 0%, #8e2121 50%, #841919 100%); }
.block-texture-black_concrete { background: linear-gradient(135deg, #101218 0%, #080a0f 50%, #000206 100%); }

/* ==================== WOOL BLOCKS ==================== */
/* Wool has a soft fuzzy texture */

.block-texture-white_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px),
    linear-gradient(135deg, #eff2f2 0%, #e9ecec 50%, #e0e3e3 100%);
}

.block-texture-orange_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #f5801c 0%, #f07613 50%, #e06c0a 100%);
}

.block-texture-magenta_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #c74dbc 0%, #bd44b3 50%, #ad3aa9 100%);
}

.block-texture-light_blue_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #44bde4 0%, #3ab3da 50%, #30a9d0 100%);
}

.block-texture-yellow_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #fcce30 0%, #f8c527 50%, #eebb1e 100%);
}

.block-texture-lime_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #7ac322 0%, #70b919 50%, #66af10 100%);
}

.block-texture-pink_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #f297b6 0%, #ed8dac 50%, #e383a2 100%);
}

.block-texture-gray_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #50585b 0%, #474f52 50%, #3e4649 100%);
}

.block-texture-light_gray_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #a7a7a0 0%, #9d9d97 50%, #93938d 100%);
}

.block-texture-cyan_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #1e939b 0%, #158991 50%, #0c7f87 100%);
}

.block-texture-purple_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #8538c8 0%, #7b2fbe 50%, #7126b4 100%);
}

.block-texture-blue_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.08) 2px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #3e44a8 0%, #353a9e 50%, #2c3094 100%);
}

.block-texture-brown_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #7c5130 0%, #724728 50%, #683d20 100%);
}

.block-texture-green_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #5e7723 0%, #546d1b 50%, #4a6313 100%);
}

.block-texture-red_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px),
    linear-gradient(135deg, #ab302a 0%, #a12722 50%, #971d1a 100%);
}

.block-texture-black_wool {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px),
    linear-gradient(135deg, #1d1e22 0%, #141519 50%, #0b0c10 100%);
}

/* ==================== WOOD BLOCKS ==================== */
/* Wood has horizontal grain lines */

.block-texture-oak_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.15) 4px, rgba(0,0,0,0.15) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.1) 7px, rgba(0,0,0,0.1) 8px
    ),
    linear-gradient(180deg, #b29260 0%, #a88754 50%, #9e7d4a 100%);
}

.block-texture-spruce_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.2) 4px, rgba(0,0,0,0.2) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.12) 7px, rgba(0,0,0,0.12) 8px
    ),
    linear-gradient(180deg, #75593a 0%, #6b4f32 50%, #61452a 100%);
}

.block-texture-birch_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.08) 4px, rgba(0,0,0,0.08) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.06) 7px, rgba(0,0,0,0.06) 8px
    ),
    linear-gradient(180deg, #d2c184 0%, #c8b77a 50%, #bead70 100%);
}

.block-texture-jungle_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.15) 4px, rgba(0,0,0,0.15) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.1) 7px, rgba(0,0,0,0.1) 8px
    ),
    linear-gradient(180deg, #a97c5b 0%, #9f7251 50%, #956847 100%);
}

.block-texture-acacia_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.15) 4px, rgba(0,0,0,0.15) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.1) 7px, rgba(0,0,0,0.1) 8px
    ),
    linear-gradient(180deg, #b7673a 0%, #ad5d32 50%, #a3532a 100%);
}

.block-texture-dark_oak_planks {
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 4px,
      rgba(0,0,0,0.25) 4px, rgba(0,0,0,0.25) 5px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(0,0,0,0.15) 7px, rgba(0,0,0,0.15) 8px
    ),
    linear-gradient(180deg, #48331a 0%, #3e2912 50%, #341f0a 100%);
}

.block-picker-cell:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

.block-picker-cell.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.1);
}