/* All buttons: main, ghost, settings grid and button rows. */

/* Main button */
button{
  font: 700 16px var(--disp);
  letter-spacing: .06em;
  color: var(--ice);
  background: transparent;
  border: 1px solid var(--ice);
  border-radius: 2px;
  padding: 13px 36px;
  cursor: pointer;
  transition:background .15s,color .15s,box-shadow .2s;
}
button:hover{
  background: var(--ice);
  color: var(--void);
  box-shadow: 0 0 28px rgba(143,227,242,.35)
}
button:focus-visible{
  outline: 2px solid var(--bone);
  outline-offset: 3px
}

/* Ghost button: small and quiet style (settings, pause) */
.ghost{
  font: 500 12px var(--mono);
  letter-spacing: 0;
  color: var(--dim);
  border-color: rgba(107,118,132,.5);
  padding: 9px 14px;
}
.ghost:hover{
  background: transparent;
  color: var(--bone);
  box-shadow: none
}

/* Setting is ON */
.ghost[aria-pressed="true"]{
  color:var(--ice);
  border-color:var(--ice)
}

/* Settings buttons in 2 columns (created in ui.js) */
.settings{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 42ch
}
.settings .ghost{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: 500 12px/1.25 var(--mono);
  text-align: center
}

/* Odd number of buttons: the last one fills the whole row */
.settings .ghost:last-child:nth-child(odd){
  grid-column: 1 / -1;
}

/* Small circle: empty = off, filled = on */
.settings .ghost[aria-pressed]::before{
  content: "○";
  opacity: .7
}
.settings .ghost[aria-pressed="true"]::before{
  content: "●";
  opacity: 1
}

/* A row of buttons */
.btnrow{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px
}
.btnrow button{
  padding-inline: 22px
}

/* Second button style: light gray instead of blue */
button.alt{
  color: var(--bone);
  border-color: rgba(216,221,211,.45)
}
button.alt:hover{
  background: var(--bone);
  color: var(--void);
  box-shadow: 0 0 24px rgba(216,221,211,.25)
}