:root {
  --bg-dark: #000000;
  --bg-light: #2a2a2c;
  --bg-mid: #5c5c5f;
  --accent: #ff9f0a;
  --text-dark: #1C1C1C;
  --text-light: #FFFFFF;
  --image-height: 28px; /* Define standard height for display images */
}

body.bg-dark {
  background: var(--bg-dark);
  color: var(--text-light);
}

.calc-container {
  width: 320px; /* Maintain width */
  padding: 16px;
  background: var(--bg-dark);
  border-radius: 40px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;

}

/* Display */
.display {
  background: var(--bg-dark); /* Match calc background */
  border: 1px solid var(--bg-light); /* Subtle border */
  border-radius: 8px;
  padding: 12px 8px; /* Slightly more padding */
  min-height: 120px; /* Adjusted min-height */
  text-align: left; /* Align items left */
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; /* Align items to the bottom */
  gap: 2px 4px; /* Row gap, Column gap */
  margin-bottom: 16px;
  overflow-y: auto; /* Add scroll if content overflows */
  max-height: 180px; /* Limit maximum height before scroll */
}

/* Container for each rhythm item (image + dot/tie) */
.rhythm-item-container {
  display: inline-flex; /* Use flex to align image and indicators */
  align-items: center; /* Center items vertically */
  margin: 0 1px; /* Small horizontal margin */
  position: relative; /* For potential absolute positioning of indicators if needed */
  height: calc(var(--image-height) + 4px); /* Ensure container height accommodates image */
  transition: transform 0.1s ease-out; /* NEW: Add transition for smooth animation */
}

/* NEW: Style for the currently playing item */
.rhythm-item-container.playing {
  transform: scale(1.25);
}

/* Styling for images within the display */
.display .note-image,
.display .rest-image {
  height: var(--image-height); /* Control image size */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align vertically */
  /* filter: brightness(0) invert(1); Apply if using black source images */
}

/* Styling for dot indicator */
.dot-indicator {
  font-size: 24px; /* Make dot prominent */
  font-weight: bold;
  margin-left: 1px; /* Space between image and dot */
  line-height: 1; /* Adjust line height for alignment */
  color: var(--text-light);
}

/* Styling for tie indicator */
.tie-indicator {
  font-size: 20px; /* Adjust size */
  margin-left: 2px; /* Space */
  line-height: 1;
  color: var(--text-light);
  /* Consider using SVG or border-based tie for better appearance */
}


/* Settings: Tempo slider & Tone selector */
.settings {
  text-align: center;
  margin: 16px auto;
  position: relative;
  z-index: 1;
}
.keys + .settings {
  margin-top: 24px;
}

/* Range input styling */
.settings input[type="range"] {
  -webkit-appearance: none;
  width: 80%;
  background: var(--bg-mid);
  height: 6px;
  border-radius: 3px;
  outline: none;
  vertical-align: middle; /* Align with label/value */
}
.settings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.settings input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Button grid */
.keys {
  display: grid;
  /* Keep 4 columns */
  grid-template-columns: repeat(4, 1fr);
   /* Add grid-auto-rows if heights are inconsistent */
   /* grid-auto-rows: 64px; */
  grid-gap: 8px;
  margin-top: 12px;
  flex: none;
}

/* Specific styling for the play button if needed */
.play-key {
  /* Example: Make it span more columns if the last row has space */
  /* grid-column: span 2; */
  /* Or center it if it's the only item */
   grid-column: 1 / -1; /* Make it span full width in its row */
   justify-self: center; /* Center within the span */
   width: 80%; /* Make it wider */
   font-size: 24px; /* Larger icon */
}


/* Calculator buttons (general) */
.key {
  width: 100%; /* Let grid control width */
  height: 64px;
  background: var(--bg-light);
  color: var(--text-light);
  border: none;
  border-radius: 50%; /* Keep circular */
  padding: 0;
  display: flex;
  flex-direction: column; /* Keep column layout */
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  overflow: hidden; /* Hide overflow from label */
  position: relative; /* For label absolute positioning */
}

.key img {
  max-width: 28px;
  max-height: 28px;
  margin-bottom: 2px; /* Space between image and potential label */
}

/* Button labels (small text below image/icon) */
.key-label {
  font-size: 9px; /* Slightly larger */
  line-height: 1;
  text-align: center;
  color: var(--text-light); /* Default light label */
  position: absolute; /* Position relative to button */
  bottom: 5px; /* Adjust position from bottom */
  width: 100%; /* Ensure it centers */
  left: 0;
  pointer-events: none; /* Don't interfere with clicks */
}

/* Specific button types */
.key.func {
  background: var(--bg-mid);
  color: var(--text-light);
}
.key.op {
  background: var(--accent);
  color: var(--text-light);
}
.key.digit {
  /* Background is var(--bg-light) already */
  /* No specific color needed here unless different from default */
}
/* Style for rest buttons if needed (optional) */
.rest-key {
  /* background: #some-other-color; */
}


.key:active {
  transform: scale(0.92);
}
.key.active {
  box-shadow: inset 0 0 0 3px var(--accent); /* Use accent color for active state */
}

/* Sichtbarer Rahmen für orangefarbene Tasten (Repeat, Zufall …) */
.key.op.active {
  box-shadow: inset 0 0 0 3px var(--text-light); /* weißer Rahmen */
}

/* Info Box */
.info-box {
  margin: 32px auto;
  text-align: center;
  width: 320px;
  padding: 16px;
}

/* Ensure images in buttons respect dark theme */
/* If source images are black, uncomment this: */
/*
.key img {
  filter: brightness(0) invert(1);
}
*/