html, body { margin: 0; padding: 0; }

.wrap { width: 100%; }
.stage { width: 100%; height: 100vh; }
#c{ width: 100%; height: 100%; display: block; }

/* stars background canvas (layout only) */
#pixel-noise{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Settings panel (layout only) */
/* FULL-WIDTH BARS (top + bottom), content stays centered via details.settings */
.ui{
  width: 100%;
  margin: 0;
  padding: 0rem; /* top bar spacing */
  box-sizing: border-box;
  user-select: none;
}

.ui--bottom{
  width: 100%;
  margin: 0;
  padding: 0 0.875rem 0.875rem 0.875rem; /* bottom bar spacing */
  box-sizing: border-box;
  user-select: none;
}

/* Chrome, Edge, Safari - Remove spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox - Remove spinners */
input[type="number"]{
  appearance: textfield;
  -moz-appearance: textfield;  
  width: 5ch;
  padding: 0.5rem;
}

details.settings{
  width: min(35rem, 100%);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Start button slot (below settings, above canvas) */
#startWrap{
  width: min(35rem, calc(100vw - 1.75rem));
  margin: 0.875rem auto 0;
  display: flex;
  justify-content: center;
}

/* Oval "Start" like your reference */
#btnStart{
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;

  /* size */
  min-width: 9.5rem;
  height: 3.1rem;
  padding: 0 2.2rem;
  margin-top: 1rem;

  /* text */
  font: var(--f-bold) 1.5rem var(--f-sans);
  color: rgb(var(--c-white)/0.65);

  /* soft inner haze */
  background:
    radial-gradient(120% 140% at 50% 50%,
      rgb(var(--c-blue-99)/0.10) 0%,
      rgb(var(--c-blue-99)/0.05) 35%,
      rgb(var(--c-blue-99)/0.00) 70%
    );

  /* subtle glow */
  box-shadow:
    0 0 0.9rem rgb(var(--c-red-99)/0.3),
    0 0 2.4rem rgb(var(--c-red-99)/0.7),
    inset 0 0 1.2rem rgb(var(--c-red-99)/0.5);
}

/* OUTER + INNER RINGS */
#btnStart::before,
#btnStart::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

#btnStart::before{
  /* outer ring */
  border: 1px solid rgb(var(--c-white)/0.10);
  box-shadow: 0 0 1.8rem rgb(var(--c-blue-99)/0.5);
}

#btnStart::after{
  /* inner ring (slightly inset) */
  inset: 0.28rem;
  border: 1px solid rgb(var(--c-blue-99)/0.8);
  opacity: 0.9;
}

/* Hover/active: tiny lift, slightly brighter ring */
#btnStart:hover{
  color: rgb(var(--c-white)/0.86);
}

#btnStart:hover::before{
  border-color: rgb(var(--c-blue-99)/0.38);
}

#btnStart:active{
  transform: translateY(1px);
}


/*Settings menu*/
summary.settings-summary{
  padding: 0.5rem 0.8rem 0.5rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

summary.settings-summary::-webkit-details-marker{ display: none; }

.chev{
  width: 0.625rem;
  height: 0.625rem;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
  margin-top: 0.125rem;
  flex: 0 0 auto;
}

details.settings[open] .chev{ transform: rotate(45deg); }

.settings-body{
  padding: 0rem 0.8rem 0.5rem 0.8rem;
}

.setting-title{
  margin-bottom: 0;
  padding-bottom: 0;
}

.row{ display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.row + .row{ margin-top: 0.625rem; }

.label{ margin: 0.5rem 0 0.3rem 0; }

.seggrid{
  display: grid;
  grid-template-columns: 
    minmax(6.5ch, auto) 
    minmax(9.5ch, auto)
    minmax(7.5ch, auto)
    minmax(6.5ch, auto)
  ;
  column-gap: 0.8rem;
  row-gap: 0.8rem;
  justify-content: start;
  align-items: center;
}

.seg{ display: contents; }

.seg .name{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dot{ width: 0.625rem; height: 0.625rem; }

.btns{ display: flex; gap: 0.5rem; }

button{
  min-width: 5.5rem;
  height: 2.5rem;
  padding: 0.2rem;
}

.spacer{ flex: 1 1 auto; }

.hint{ margin-top: 0.5rem; }

/* Controls block (below canvas); hidden before Start (idle) */
#controls{
  width: min(35rem, calc(100vw - 1.75rem));
  margin: 0.875rem auto 1.5rem;
  display: none;
}

/* centered, side-by-side */
.controls-row{
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
}

/* ensure button label centering */
.controls-row button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 5.625rem;
  height: 2.5rem;
  padding: 0.5rem;
}

/* Sound / Voice toggles */
.sound-toggles{
  display: flex;
  gap: 0.875rem;
  align-items: center;
  flex-wrap: nowrap;
}

.sound-toggle{
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  height: 2.5rem; /* match buttons */
  margin-top: 0.3rem;
}

/* Slider UI */
.toggle-ui{
  width: 3rem;
  height: 1.8rem;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
}

.toggle-knob{
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  transform: translateY(-50%);
  transition: left 120ms ease;
}

.sound-toggle > input[type="checkbox"]{
  display: none;
}

/* ON state */
.sound-toggle input:checked ~ .toggle-ui .toggle-knob{
  left: 1.4375rem;
}

/* Disabled state */
.sound-toggle input:disabled ~ .toggle-ui{
  opacity: 0.45;
}

.sound-toggle input:disabled ~ .label{
  opacity: 0.6;
}

.sound-children{
  display: flex;
  gap: 0.875rem;
}

/* collapse children when master is off */
.sound-toggles:has(#bt_sound_on:not(:checked)) .sound-children{
  display: none;
}

.toggle-ui::before{
  content: "OFF";
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.sound-toggle input:checked ~ .toggle-ui::before{
  content: "ON";
  left: 0.375rem;
  right: auto;
  opacity: 0.9;
}