/* Chroma — the grid is the whole interface, so it gets the whole width.
   Cells are square via aspect-ratio and never drop below 44px on the tightest
   phone: at the 6x6 endgame grid on a 320px viewport each cell still clears
   the minimum tap target with the gap accounted for. */

#grid {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  margin: var(--space-3) auto var(--space-2);
}

.ch-cell {
  aspect-ratio: 1;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0;
  cursor: pointer;
  /* No hover or active colour change: any styling that reacts to the pointer
     would give the odd swatch away by making cells comparable through motion
     instead of colour. Only the outline moves. */
  transition: transform 90ms var(--ease);
}
.ch-cell:active { transform: scale(0.96); }
.ch-cell:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

.ch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 460px;
  margin: 0 auto;
}
#round-label { font-weight: 800; font-size: 1.05rem; margin: 0; }
#lives { letter-spacing: 2px; font-size: 1rem; }

#ribbon {
  display: flex;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: var(--space-3) 0 var(--space-2);
  border: 1px solid var(--border);
}
.ch-seg { flex: 1 1 0; min-width: 3px; }

#end-score { font-size: 1.6rem; font-weight: 800; margin: 0; }