body {
  background: #1b1b1b;
  color: #eee;
  font-family: system-ui, sans-serif;
}

#field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  max-width: 900px;
  max-height: 600px;
  aspect-ratio: 3/2;
  position: relative; /* für Flash-Zahl */
}

.zone {
  border: 2px solid #888;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(2rem, 8vw, 4rem);
  background: #2a2a2a;
  transition: background 0.15s;
}

.highlight {
  background: #555 !important;
}

.flash-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: bold;
  color: yellow;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.flash-active {
  opacity: 0.8;
}

/* Fullscreen Flash */
#screenFlash {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(255,255,255,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 999;
}

/* Ready-Set-Go Overlay */
#readyOverlay {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(3rem, 12vw, 8rem);
  color: #FFD700;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hidden { display: none; }