/* Reset margins, ensure body fills screen, background black */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #212121;
  box-sizing: border-box;
}

/* Place bottom bar at the very bottom, full width, centered content */
#bottom-bar {
  position: absolute; 
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 10px 0; /* some spacing from bottom */
}

/* Make the emoji link big, with no default button style */
.icon-button {
  display: inline-block;
  font-size: 2rem;          /* Large icon size */
  line-height: 1;           /* No extra vertical padding */
  color: #fff;              /* White icon */
  background: none;         /* No background */
  border: none;             /* Remove border */
  text-decoration: none;    /* No underline */
  cursor: pointer;
  /* Remove any default appearance on some browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Optional hover/focus styling */
.icon-button:hover,
.icon-button:focus {
  opacity: 0.8;             /* Slight fade on hover/focus */
}



.step-button {
  touch-action: none; /* Prevents default scrolling on touch drag */
  /* rest of your styles */
}



/* 
  The parent container is an 18×12 grid:
    - 16 columns for the buttons,
    - plus 1 “empty” column on each side (left/right) for the border
    - Similarly for rows: 10 rows for buttons + 1 border row on top + 1 on bottom
*/
#container {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(12, 1fr);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

/*
  The #sequencer occupies the 16×10 center area (columns 2–17, rows 2–11).
  We add a gap between cells so there's a small margin between each button.
*/
#sequencer {
  grid-column: 2 / span 16; /* from column 2 through column 17 (16 total) */
  grid-row: 2 / span 10;    /* from row 2 through row 11 (10 total) */
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 5px;                 /* small margin between each button cell */
  background-color: #212121;  /* ensure background remains black */
  box-sizing: border-box;
}

/* Step buttons: squircles with white border, black background */
.step-button {
  border-radius: 25%;   /* approximates a squircle shape */
  border: 2px solid #747575;
  background-color: #3f3f40;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

/* Active step = white fill */
.step-button.active {
  background-color: white;
}

/* Highlighted column = darker background */
.step-button.highlight {
  background-color: #333;
}

/* Active + highlight = slightly lighter gray */
.step-button.active.highlight {
  background-color: #ddd;
}