/* ============================================================
   Frequency Player — Dark Glass Aesthetic
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&family=Syne:wght@400;700;800&display=swap');

/* ── Root variables ─────────────────────────────────────────── */
.fp-wrap {
  --fp-bg:       #09090f;
  --fp-surface:  rgba(255,255,255,.04);
  --fp-border:   rgba(255,255,255,.08);
  --fp-accent:   #00e5ff;
  --fp-accent2:  #7b2fff;
  --fp-glow:     rgba(0,229,255,.25);
  --fp-text:     #e8eaf6;
  --fp-muted:    rgba(232,234,246,.45);
  --fp-radius:   20px;
  --fp-font:     'Syne', sans-serif;
  --fp-mono:     'Syne Mono', monospace;

  position: relative;
  max-width: 520px;
  margin: 40px auto;
  padding: 48px 40px 36px;
  background: var(--fp-bg);
  border: 1px solid var(--fp-border);
  border-radius: 32px;
  overflow: hidden;
  font-family: var(--fp-font);
  color: var(--fp-text);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.06),
    0 32px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── Animated rings ─────────────────────────────────────────── */
.fp-rings { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.fp-ring {
  position:absolute; border-radius:50%;
  border: 1px solid var(--fp-accent);
  opacity: 0;
  top:50%; left:50%;
  transform: translate(-50%,-50%) scale(.3);
  transition: none;
}
.fp-ring--1 { width:500px; height:500px; }
.fp-ring--2 { width:700px; height:700px; border-color: var(--fp-accent2); }
.fp-ring--3 { width:900px; height:900px; }

.fp-wrap.fp-playing .fp-ring {
  animation: fp-ring-pulse 3s ease-out infinite;
}
.fp-wrap.fp-playing .fp-ring--2 { animation-delay:.8s; }
.fp-wrap.fp-playing .fp-ring--3 { animation-delay:1.6s; }

@keyframes fp-ring-pulse {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  30%  { opacity:.18; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.1); }
}

/* ── Header ─────────────────────────────────────────────────── */
.fp-header { text-align:center; margin-bottom:32px; position:relative; z-index:1; }
.fp-label-tag {
  display:inline-block;
  font-family: var(--fp-mono);
  font-size:10px;
  letter-spacing:.25em;
  color: var(--fp-accent);
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.2);
  border-radius:100px;
  padding:4px 14px;
  margin-bottom:14px;
}
.fp-title {
  font-size:clamp(28px,6vw,42px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 6px;
  background: linear-gradient(135deg, var(--fp-text) 40%, var(--fp-accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.fp-subtitle { font-size:13px; color:var(--fp-muted); margin:0; letter-spacing:.04em; }

/* ── Frequency display ──────────────────────────────────────── */
.fp-display {
  text-align:center;
  position:relative; z-index:1;
  margin-bottom:24px;
}
.fp-freq-value {
  font-family: var(--fp-mono);
  font-size:clamp(56px,14vw,88px);
  line-height:1;
  color: var(--fp-accent);
  text-shadow: 0 0 40px var(--fp-glow), 0 0 80px rgba(0,229,255,.15);
  letter-spacing:-.04em;
  transition: color .2s;
}
.fp-freq-unit {
  font-family: var(--fp-mono);
  font-size:16px;
  color:var(--fp-muted);
  letter-spacing:.15em;
  margin-top:-4px;
}
.fp-note-name {
  display:inline-block;
  margin-top:10px;
  font-family: var(--fp-mono);
  font-size:12px;
  color: var(--fp-accent2);
  background: rgba(123,47,255,.12);
  border:1px solid rgba(123,47,255,.25);
  border-radius:6px;
  padding:3px 12px;
  letter-spacing:.1em;
  min-width:52px;
  transition: opacity .2s;
}
.fp-note-name.fp-note-hidden { opacity:0; }

/* ── Visualiser ─────────────────────────────────────────────── */
.fp-visualiser {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  height:48px;
  margin-bottom:28px;
  position:relative; z-index:1;
}
.fp-bar {
  flex:1;
  max-width:10px;
  background: linear-gradient(to top, var(--fp-accent2), var(--fp-accent));
  border-radius:3px 3px 1px 1px;
  height:4px;
  opacity:.3;
  transform-origin:bottom;
  transition: height .05s, opacity .3s;
}
.fp-wrap.fp-playing .fp-bar {
  opacity:1;
  animation: fp-bar-dance calc(0.3s + var(--i) * 0.018s) ease-in-out infinite alternate;
}
@keyframes fp-bar-dance {
  from { height:4px; }
  to   { height:calc(8px + var(--i,0) * 1.2px); }
}

/* ── Slider shared ──────────────────────────────────────────── */
.fp-slider {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:100px;
  background: var(--fp-border);
  outline:none;
  cursor:pointer;
}
.fp-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--fp-accent);
  box-shadow: 0 0 0 3px rgba(0,229,255,.2), 0 0 12px var(--fp-glow);
  transition: transform .15s, box-shadow .15s;
  cursor:grab;
}
.fp-slider::-webkit-slider-thumb:active { transform:scale(1.25); cursor:grabbing; }
.fp-slider::-moz-range-thumb {
  width:20px; height:20px; border:none;
  border-radius:50%;
  background: var(--fp-accent);
  box-shadow: 0 0 0 3px rgba(0,229,255,.2), 0 0 12px var(--fp-glow);
  cursor:grab;
}

/* ── Main slider section ────────────────────────────────────── */
.fp-slider-section {
  display:flex; align-items:center; gap:12px;
  position:relative; z-index:1;
  margin-bottom:20px;
}
.fp-range-label {
  font-family:var(--fp-mono);
  font-size:11px;
  color:var(--fp-muted);
  white-space:nowrap;
  min-width:42px;
}
.fp-slider-wrap { flex:1; position:relative; }
.fp-slider-track-fill {
  position:absolute;
  top:50%; transform:translateY(-50%);
  left:0; width:0; height:4px;
  background: linear-gradient(90deg, var(--fp-accent2), var(--fp-accent));
  border-radius:100px;
  pointer-events:none;
  transition: width .05s;
}

/* ── Manual input ───────────────────────────────────────────── */
.fp-manual {
  text-align:center;
  margin-bottom:24px;
  position:relative; z-index:1;
}
.fp-manual-label {
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--fp-muted);
  margin-bottom:10px;
  text-transform:uppercase;
}
.fp-input-wrap {
  display:inline-flex;
  align-items:center;
  gap:0;
  background: var(--fp-surface);
  border:1px solid var(--fp-border);
  border-radius:12px;
  overflow:hidden;
  transition: border-color .2s, box-shadow .2s;
}
.fp-input-wrap:focus-within {
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 0 0 3px rgba(0,229,255,.1);
}
.fp-input {
  background:transparent;
  border:none;
  outline:none;
  color:var(--fp-text);
  font-family:var(--fp-mono);
  font-size:22px;
  padding:10px 4px 10px 20px;
  width:110px;
  text-align:right;
}
.fp-input::-webkit-outer-spin-button,
.fp-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.fp-input-unit {
  font-family:var(--fp-mono);
  font-size:13px;
  color:var(--fp-muted);
  padding:0 16px 0 6px;
}

/* ── Preset buttons ─────────────────────────────────────────── */
.fp-presets {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  margin-bottom:24px;
  position:relative; z-index:1;
}
.fp-preset {
  font-family:var(--fp-mono);
  font-size:12px;
  padding:7px 14px;
  background: var(--fp-surface);
  border:1px solid var(--fp-border);
  border-radius:8px;
  color:var(--fp-muted);
  cursor:pointer;
  transition: all .2s;
  letter-spacing:.04em;
}
.fp-preset:hover {
  border-color: rgba(0,229,255,.35);
  color: var(--fp-accent);
  background: rgba(0,229,255,.06);
}
.fp-preset--active, .fp-preset.fp-preset--active {
  border-color: var(--fp-accent);
  color: var(--fp-accent);
  background: rgba(0,229,255,.1);
  box-shadow: 0 0 10px rgba(0,229,255,.15);
}

/* ── Volume row ─────────────────────────────────────────────── */
.fp-volume-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:28px;
  position:relative; z-index:1;
}
.fp-vol-icon { width:18px; height:18px; color:var(--fp-muted); flex-shrink:0; }
.fp-vol-slider { flex:1; }
.fp-vol-slider::-webkit-slider-thumb { background:var(--fp-accent2); box-shadow:0 0 0 3px rgba(123,47,255,.2); }
.fp-vol-slider::-moz-range-thumb { background:var(--fp-accent2); }
.fp-vol-value {
  font-family:var(--fp-mono);
  font-size:12px;
  color:var(--fp-muted);
  min-width:36px;
  text-align:right;
}

/* ── Play button ────────────────────────────────────────────── */
.fp-play-btn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%;
  padding:18px 24px;
  background: linear-gradient(135deg, var(--fp-accent2), var(--fp-accent));
  border:none;
  border-radius:var(--fp-radius);
  color:#000;
  font-family:var(--fp-font);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  cursor:pointer;
  position:relative; z-index:1;
  transition: transform .15s, box-shadow .2s, opacity .2s;
  box-shadow: 0 8px 32px rgba(0,229,255,.25), 0 0 0 1px rgba(0,229,255,.15);
}
.fp-play-btn:hover {
  transform:translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,229,255,.35), 0 0 0 1px rgba(0,229,255,.25);
}
.fp-play-btn:active { transform:translateY(0); }
.fp-play-btn svg { width:20px; height:20px; }

.fp-wrap.fp-playing .fp-play-btn {
  background: linear-gradient(135deg, rgba(255,60,60,.9), rgba(220,30,80,.9));
  box-shadow: 0 8px 32px rgba(220,30,80,.3);
}

/* ── Footer note ────────────────────────────────────────────── */
.fp-footer-note {
  margin:20px 0 0;
  text-align:center;
  font-size:11px;
  color: rgba(232,234,246,.25);
  letter-spacing:.03em;
  position:relative; z-index:1;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .fp-wrap { padding:36px 24px 28px; border-radius:24px; }
  .fp-presets { gap:6px; }
  .fp-preset { font-size:11px; padding:6px 10px; }
}