/* Layout: the sky canvas fills the screen; two hover zones (top-right corner, bottom edge) hold every control and stay invisible until you reach for them. */
:root {
  --ink-rgb: 239 227 204;   /* follows the particle colour, updated from JS */
  --bg-rgb: 13 17 29;       /* follows the top of the sky, updated from JS */
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: rgb(var(--bg-rgb)); color: rgb(var(--ink-rgb)); font-family: system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#stage { position: fixed; inset: 0; cursor: pointer; }

#glyph {
  position: fixed; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none; color: rgb(var(--ink-rgb)); opacity: .5; transition: opacity .9s var(--ease), transform .9s var(--ease);
}
#glyph svg { width: 100%; height: 100%; }
body.is-playing #glyph { opacity: 0; transform: scale(.85); }
body.is-playing #stage:hover + #glyph { opacity: .18; transform: scale(1); }

.zone { position: fixed; display: flex; z-index: 2; }
.zone-corner {
  top: 0; right: 0; justify-content: flex-end; align-items: flex-start;
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 60px 120px;
}
.zone-bottom {
  left: 0; right: 0; bottom: 0; justify-content: center;
  padding: 70px max(16px, env(safe-area-inset-right, 0px)) calc(26px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.panel {
  display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: 999px; border: 1px solid rgb(var(--ink-rgb) / .1);
  background: rgb(var(--bg-rgb) / .28);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.zone-corner .panel { transform: translateY(-6px); }
.zone:hover .panel, .zone:focus-within .panel, .zone.show .panel { opacity: 1; transform: none; }
.dock { flex-wrap: wrap; justify-content: center; max-width: 100%; }

.panel button {
  width: 38px; height: 38px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer;
  color: rgb(var(--ink-rgb) / .6); background: transparent; transition: color .3s, background .3s;
}
.panel button svg { width: 19px; height: 19px; }
.panel button:hover { color: rgb(var(--ink-rgb)); background: rgb(var(--ink-rgb) / .08); }
.panel button:focus-visible, .mix input:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .8); outline-offset: 2px; }
.panel button[aria-pressed="true"] { color: rgb(var(--ink-rgb)); background: rgb(var(--ink-rgb) / .12); }
.panel button.is-now { color: rgb(var(--ink-rgb) / .9); box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .25); }
.panel button.big { width: 44px; height: 44px; color: rgb(var(--ink-rgb) / .85); }
.panel button.big svg { width: 22px; height: 22px; }
.sep { width: 1px; height: 20px; margin: 0 6px; background: rgb(var(--ink-rgb) / .14); }

.mix { display: flex; align-items: center; gap: 7px; padding: 0 8px; color: rgb(var(--ink-rgb) / .55); }
.mix svg { width: 16px; height: 16px; flex: none; }
.mix input { -webkit-appearance: none; appearance: none; width: 74px; height: 18px; background: transparent; margin: 0; cursor: pointer; }
.mix input::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: rgb(var(--ink-rgb) / .22); }
.mix input::-moz-range-track { height: 2px; border-radius: 2px; background: rgb(var(--ink-rgb) / .22); }
.mix input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: rgb(var(--ink-rgb)); border: 0; }
.mix input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--ink-rgb)); border: 0; }

@media (max-width: 560px) {
  .mix input { width: 56px; }
  .zone-corner { padding-left: 40px; }
}
@media (hover: none) {
  .zone-bottom .panel { opacity: .55; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, #glyph { transition: none; }
}