/* Night-friendly palette: very dark, warm accent (little blue light). */
:root {
  --bg: #070b16;
  --surface: #0f1528;
  --surface-2: #172038;
  --border: #222c48;
  --text: #d6d9e6;
  --muted: #8189a3;
  --accent: #eeb06a;
  --accent-soft: rgba(238, 176, 106, 0.16);
  --accent-ink: #1c1306;
  --radius: 14px;
  --button-size: min(68vw, 46vh, 300px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% 35%, #0e1630 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }

.app {
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.top h1 {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Big start/stop button ---------- */

.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 0;
}

.big {
  position: relative;
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  border: 2px solid var(--border);
  background: radial-gradient(circle at 50% 35%, var(--surface-2), var(--surface) 70%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
}

.big:active { transform: scale(0.97); }
.big:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

/* The play triangle sits a hair right of its box centre in the SVG itself: optically centred. */
.big .icon { width: 30%; height: 30%; fill: var(--accent); }
.big .icon-stop { display: none; }

.big .label {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.big .remaining {
  min-height: 1.3em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 1rem;
}

.big[aria-pressed="true"] {
  border-color: rgba(238, 176, 106, 0.55);
  animation: breathe 6s ease-in-out infinite;
}
.big[aria-pressed="true"] .icon-play { display: none; }
.big[aria-pressed="true"] .icon-stop { display: block; }

@keyframes breathe {
  0%, 100% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 18px var(--accent-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .big[aria-pressed="true"] { animation: none; box-shadow: 0 0 0 10px var(--accent-soft); }
}

.status {
  margin: 0;
  min-height: 1.4em;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
}

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(15, 21, 40, 0.75);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 16px;
}

.field { display: flex; flex-direction: column; gap: 10px; }

.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
#volume-value { float: right; font-variant-numeric: tabular-nums; }

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}

.seg button, .chips button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.seg button[aria-checked="true"], .chips button[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.chips button {
  background: var(--bg);
  border: 1px solid var(--border);
}
.chips button[aria-checked="true"] { border-color: var(--accent); }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  touch-action: pan-y;
  --fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-2) var(--fill));
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-2) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--text);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text);
  border: 0;
}

/* Toggle switch */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.2s;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s, background 0.2s;
}
.switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--accent); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Short landscape phones: put the button next to the controls. */
@media (orientation: landscape) and (max-height: 520px) {
  .app { max-width: 900px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
  .top { width: 100%; }
  .center { flex: 1; padding: 0; --button-size: min(60vh, 260px); }
  .controls { flex: 1; }
}