.block {
  position: absolute;
  top: 0; left: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  touch-action: none;
  will-change: transform;
  /* Leichter, gleichmäßiger Schatten — folgt der PNG-Alpha-Form, sodass
     übereinanderliegende Blöcke optisch besser voneinander getrennt sind. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.block[data-selected='true'] {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
.lasso-overlay { pointer-events: none; }

/* Subtile farbliche Hinterlegung der H/Z/E-Zonen im Hauptfeld
   (etwas dezenter als iOS, damit der Fokus auf den Material-Blöcken bleibt). */
.main-block-field {
  background:
    linear-gradient(
      to right,
      rgba(255, 138, 128, 0.18) 0,
      rgba(255, 138, 128, 0.18) var(--hundred-x-border, 33.33%),
      rgba(140, 158, 255, 0.18) var(--hundred-x-border, 33.33%),
      rgba(140, 158, 255, 0.18) var(--ten-x-border, 66.66%),
      rgba(165, 214, 167, 0.18) var(--ten-x-border, 66.66%),
      rgba(165, 214, 167, 0.18) var(--right-edge, 100%),
      white var(--right-edge, 100%)
    );
}

.bw-mode .main-block-field {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.06) var(--hundred-x-border, 33.33%),
      rgba(0, 0, 0, 0.10) var(--hundred-x-border, 33.33%),
      rgba(0, 0, 0, 0.10) var(--ten-x-border, 66.66%),
      rgba(0, 0, 0, 0.06) var(--ten-x-border, 66.66%),
      rgba(0, 0, 0, 0.06) var(--right-edge, 100%),
      white var(--right-edge, 100%)
    );
}

/* Sortier-Tafel: die 3 H/Z/E-Zonen UNTER dem Storage-Bereich sind farbig
   hinterlegt, damit Kinder sehen wohin sie ziehen sollen. */
.sort-block-field {
  background:
    linear-gradient(
      to right,
      rgba(255, 138, 128, 0.35) 0,
      rgba(255, 138, 128, 0.35) var(--hundred-x-border, 33.33%),
      rgba(140, 158, 255, 0.35) var(--hundred-x-border, 33.33%),
      rgba(140, 158, 255, 0.35) var(--ten-x-border, 66.66%),
      rgba(165, 214, 167, 0.35) var(--ten-x-border, 66.66%),
      rgba(165, 214, 167, 0.35) var(--right-edge, 100%)
    );
}
.bw-mode .sort-block-field {
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.06) 0,
      rgba(0, 0, 0, 0.06) var(--hundred-x-border, 33.33%),
      rgba(0, 0, 0, 0.10) var(--hundred-x-border, 33.33%),
      rgba(0, 0, 0, 0.10) var(--ten-x-border, 66.66%),
      rgba(0, 0, 0, 0.06) var(--ten-x-border, 66.66%),
      rgba(0, 0, 0, 0.06) var(--right-edge, 100%)
    );
}