/* Day 1/30 - Bouncing balls in a rotating hexagon
   Visual world: cold ink field, one saturated accent (hot pink), minimal chrome.
   Shape rule: interactive controls are fully round, surfaces are 20px. */

:root {
  --ink:        #0a0c12;
  --ink-lift:   #141a2a;
  --surface:    rgba(20, 26, 42, 0.78);
  --hairline:   rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.16);

  --accent:     #ff2e7e;
  --accent-hot: #ff7cb0;

  --text:       #ece8f2;
  --text-dim:   #9a95a8;

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --bar-h:      3.5rem;
  --pad:        max(1rem, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------- first-run hint ---------- */

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 1.75rem);
  translate: -50% 0;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}

.hint[data-show] { opacity: 1; }

/* ---------- bottom bar: the only permanent chrome ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding: 0 var(--pad) env(safe-area-inset-bottom);
  pointer-events: none;
}

.bar > * { pointer-events: auto; }

.toggle {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), scale 180ms var(--ease);
}

.toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--hairline-2);
}

.toggle:active { scale: 0.97; }

/* The one consistent thread across all 30 days: same face, same corner, same scale. */
.day {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--text-dim);
  user-select: none;
}

/* ---------- controls panel ---------- */

.panel {
  position: fixed;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 0.5rem);
  max-width: 22rem;
  display: grid;
  gap: 1.125rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  translate: 0 0.75rem;
  visibility: hidden;
  transition: opacity 260ms var(--ease), translate 260ms var(--ease), visibility 260ms;
}

.panel[data-open] {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
}

.field { display: grid; gap: 0.625rem; }

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-head label { color: var(--text-dim); }
.field-head output { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;          /* 44px touch target, track drawn inside */
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: var(--hairline-2);
}

input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: var(--hairline-2);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.4375rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255, 46, 126, 0.14);
  transition: box-shadow 180ms var(--ease), scale 180ms var(--ease);
}

input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255, 46, 126, 0.14);
}

input[type="range"]:active::-webkit-slider-thumb {
  scale: 1.15;
  box-shadow: 0 0 0 9px rgba(255, 46, 126, 0.2);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.actions button {
  min-height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), scale 180ms var(--ease);
}

.actions button:active { scale: 0.97; }

#pause[aria-pressed="true"] {
  border-color: rgba(255, 46, 126, 0.5);
  background: rgba(255, 46, 126, 0.12);
  color: var(--accent-hot);
}

/* ---------- focus, contrast and motion preferences ---------- */

:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
}

@media (prefers-reduced-transparency: reduce) {
  .panel, .toggle, .hint {
    background: #141a2a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-dim: #c9c4d4;
    --hairline: rgba(255, 255, 255, 0.24);
    --hairline-2: rgba(255, 255, 255, 0.4);
  }
}

/* The simulation itself is the point of this build, so it keeps running under
   reduced motion (see CONVENTIONS.md). Chrome transitions and the intro do not,
   and Pause is always available as the non-motion escape. */
@media (prefers-reduced-motion: reduce) {
  .hint, .toggle, .panel, .actions button, input[type="range"]::-webkit-slider-thumb {
    transition-duration: 1ms;
  }
}

@media (min-width: 30rem) {
  :root { --bar-h: 4rem; }
  .day { font-size: 0.6875rem; }
}