html,body{
  height:100%;
  margin:0;
  /* use a black base with the starry image on top */
  background-color: #000;
  background-image: url('/starbackground.png');
  background-repeat: no-repeat;
  background-position: center center;
  /* fill the viewport while preserving aspect ratio so the star texture dominates */
  background-size: cover;
  overflow:hidden;
}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{
  position:fixed;
  left:12px;
  top:12px;
  background:rgba(10,10,10,0.45);
  color:#eee;
  padding:10px;
  border-radius:10px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;
  font-size:13px;
  min-width:150px;
}
.row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:6px 0}
/* keep the small-row behavior for icon buttons unchanged */
.row.small{justify-content:space-around}
label{cursor:pointer;user-select:none; /* keep label first in DOM order, give small right spacing when grouped */ margin-right:8px}
input[type="range"]{width:110px; margin:0 8px}
/* base button style */
button{
  padding:0;
  border-radius:8px;
  border:0;
  background:#1a1a1a;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
/* equal sized square icon buttons used in the small row */
.row.small .icon-btn{
  width:44px;
  height:44px;
  margin:0 6px;
  font-size:16px;
  line-height:1;
  background:#222;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
/* ensure Font Awesome icons render visible on dark backgrounds */
.row.small .icon-btn i { color: #fff; }
/* subtle hover/focus */
.row.small .icon-btn:hover{ transform: translateY(-2px); background:#2a2a2a; box-shadow: 0 6px 12px rgba(0,0,0,0.5); }
.row.small .icon-btn:active{ transform: translateY(0); }

/* visually hidden text for accessibility (keeps original labels available to screen readers) */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:600px){
  #ui{left:8px;top:8px;padding:8px;font-size:14px;min-width:135px}
  input[type="range"]{width:95px}
}

/* DOM-based star glow overlay:
   - Each close foreground star that should glow gets a div.star-glow positioned over the canvas.
   - The glowSize slider controls its CSS scale; 0 disables the glow (opacity 0).
   - Smooth transitions for size and opacity for a gentle appearance.
*/
.star-glow{
  position:fixed;
  left:0;
  top:0;
  width:64px;
  height:64px;
  pointer-events:none;
  transform-origin:center center;
  mix-blend-mode:screen;
  will-change:transform,opacity;
  opacity:0;
  /* only animate scale and opacity to avoid sliding - center via translate(-50%,-50%) */
  transform: translate(-50%,-50%) scale(0);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms linear;
  border-radius:50%;
  filter: blur(12px);
  background: radial-gradient(circle at 50% 40%, rgba(255,245,220,0.95) 0%, rgba(255,200,120,0.45) 30%, rgba(255,140,80,0.18) 60%, rgba(0,0,0,0) 100%);
  mix-blend-mode: screen;
  z-index: 9998;
}

/* small value badge to the right of labels */
#ui label{ display:flex; align-items:center; gap:8px; }
.val{
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight:600;
  font-size:12px;
  color:#fff;
  min-width:44px;
  text-align:center;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}