/* Stimmgerät: Kreis, Notenleiste und auswählbare Saiten. */
:root {
  --bg: #fff;
  --surface: #fafafa;
  --text-primary: #111;
  --text-secondary: #6e6e73;
  --border: #dedee0;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --timer-text-above: #111;
  --timer-text-below: #fff;
  --timer-bg: #fff;
  --timer-fill: #111;
  --gauge-size: clamp(280px, 31vw, 500px);
  --note-size: clamp(54px, 3.7vw, 64px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: Lato, sans-serif;
}
body { padding-top: var(--sim-nav-offset, 44px); }
button { font-family: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 4px; }
[hidden] { display: none !important; }
.tuner-container, .screen {
  min-height: calc(100vh - var(--sim-nav-offset, 44px));
  min-height: calc(100dvh - var(--sim-nav-offset, 44px));
}
.screen { width: 100%; padding: 1.5rem; }

/* Both screens stay in document flow, including on short displays. */
#permission-screen { display: grid; place-items: center; }
.permission-card {
  width: min(100%, 420px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
}
.mic-icon-placeholder {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  place-items: center;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  background: var(--border);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.permission-card h2 { margin: 0 0 1rem; font-size: 1.5rem; }
.permission-card p { margin: 0 0 1.5rem; color: var(--text-secondary); line-height: 1.5; }
.permission-card .audio-error { color: var(--text-primary); }
.primary-btn {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  border: 2px solid var(--text-primary);
  border-radius: 12px;
  background: var(--text-primary);
  color: var(--bg);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.primary-btn:disabled { opacity: .6; cursor: default; }

#tuner-screen { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.tuner-header { display: flex; justify-content: center; width: 100%; }
.instrument-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px;
  border: 2px solid var(--border);
  border-radius: 50px;
  background: var(--surface);
}
.instrument-btn {
  min-width: 64px;
  min-height: 48px;
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--text-secondary);
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
}
.instrument-btn.active { background: var(--text-primary); color: var(--bg); }
.direction-message {
  min-height: 2.6rem;
  width: 100%;
  color: var(--text-primary);
  font-size: clamp(1.125rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.tuner-workspace {
  display: grid;
  grid-template-columns: var(--gauge-size) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
  width: min(100%, 1400px);
  padding: clamp(1rem, 5vh, 3rem) 0 2rem;
}
.tuner-left-panel { display: flex; justify-content: center; min-width: 0; }
.tuner-gauge-outer {
  position: relative;
  width: var(--gauge-size);
  height: var(--gauge-size);
  overflow: hidden;
  border: 4px solid var(--border);
  border-radius: 50%;
  background: var(--timer-bg);
  box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}
.tuner-water, .tuner-water-fill { position: absolute; inset-inline: 0; }
.tuner-water { inset-block: 0; z-index: 1; }
.tuner-water-fill { bottom: 50%; height: 0; background: var(--timer-fill); }
.tuner-glow { position: absolute; inset: 0; z-index: 2; background: var(--accent-green); opacity: 0; }
.tuner-gauge-outer.in-tune { border-color: var(--accent-green); box-shadow: 0 0 35px rgb(34 197 94 / 40%); }
.tuner-gauge-outer.in-tune .tuner-glow { opacity: 1; }
.tuner-gauge-outer[data-status="uncertain"] .tuner-content,
.tuner-gauge-outer[data-status="holding"] .tuner-content { opacity: .7; }
.tuner-gauge-outer[data-status="uncertain"] .frequency-display,
.tuner-gauge-outer[data-status="holding"] .frequency-display { opacity: 1; }
.tuner-content {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-image: linear-gradient(var(--timer-text-above), var(--timer-text-above));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.note-display { margin: .5rem 0; font-size: clamp(64px, 7vw, 100px); font-weight: 900; line-height: 1; }
.frequency-display { font-size: 18px; font-weight: 700; letter-spacing: .05em; opacity: .8; }
.arrow-indicator { font-size: 1.8rem; font-weight: 900; line-height: 1; opacity: 0; }
.arrow-indicator.visible { opacity: 1; }
.tuner-gauge-outer.in-tune .tuner-content { -webkit-text-fill-color: #111; }

.tuner-strings-panel { min-width: 0; }
.string-stage {
  --string-intervals: 5;
  position: relative;
  width: 100%;
  height: var(--gauge-size);
  min-height: max(280px, calc((var(--note-size) + 12px) * var(--string-intervals) / .84));
}
.note-spine {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(var(--note-size) / 2 - 3px);
  width: 6px;
  border-radius: 99px;
  background: var(--border);
}
.strings-svg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: var(--note-size);
  width: calc(100% - var(--note-size));
  height: 100%;
  overflow: visible;
}
.strings-container-vertical { position: absolute; z-index: 4; inset: 0 auto 0 0; width: var(--note-size); }
.string-btn {
  position: absolute;
  left: 0;
  display: grid;
  width: var(--note-size);
  height: var(--note-size);
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-primary);
  font-size: clamp(1.65rem, 2.7vw, 2.4rem);
  font-weight: 900;
  cursor: pointer;
}
.string-btn.active { border-color: var(--text-primary); background: var(--text-primary); color: var(--bg); }
.string-btn.in-tune { border-color: var(--accent-green); background: var(--accent-green); color: #111; box-shadow: 0 0 16px rgb(34 197 94 / 45%); }
.string-btn.muted { color: var(--text-secondary); opacity: .5; }
.pitch-note-bubble {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: var(--text-primary);
  box-shadow: 0 1px 5px rgb(0 0 0 / 16%);
  opacity: 0;
  transform: translate(-50%, -50%);
}
.pitch-note-bubble.visible { opacity: 1; }
.pitch-note-bubble.in-tune { width: var(--note-size); height: var(--note-size); background: var(--accent-green); opacity: .65; }
.pitch-note-bubble.holding { background: var(--text-secondary); opacity: .6; }
.string-hit-path { fill: none; stroke: transparent; stroke-linecap: round; pointer-events: stroke; cursor: pointer; touch-action: manipulation; }
.string-path { fill: none; stroke: var(--text-primary); stroke-linecap: round; pointer-events: none; }
.string-path.active { filter: drop-shadow(0 0 3px rgb(0 0 0 / 35%)); }
.string-path.muted { opacity: .18; }
.string-path.in-tune { stroke: var(--accent-green); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --surface: #111;
    --text-primary: #fff;
    --text-secondary: #aaa;
    --border: #383838;
    --timer-text-above: #fff;
    --timer-text-below: #000;
    --timer-bg: #000;
    --timer-fill: #fff;
  }
}
@media (max-width: 700px) {
  :root {
    --gauge-size: clamp(140px, calc(100dvh - var(--sim-nav-offset, 44px) - env(safe-area-inset-bottom, 0px) - 396px), 215px);
    --note-size: 44px;
  }
  .screen { padding: 1rem .75rem; }
  #tuner-screen { gap: 6px; padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px)); }
  .instrument-selector { padding: 2px; }
  .instrument-btn { min-height: 44px; padding: .25rem 1rem; }
  .direction-message { min-height: 22px; font-size: 1rem; line-height: 22px; white-space: nowrap; }
  .tuner-workspace { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; }
  .string-stage { height: max(280px, calc((var(--note-size) + 4px) * var(--string-intervals) / .84)); min-height: 280px; }
  .note-display { margin: 4px 0; font-size: 64px; }
  .frequency-display { font-size: 16px; }
  .arrow-indicator { font-size: 1.4rem; }
  .string-btn { font-size: 1.65rem; }
}
/* Short browser viewports put the two displays beside each other. */
@media (max-width: 700px) and (max-height: 640px) {
  :root { --gauge-size: clamp(140px, 40vw, 160px); }
  #tuner-screen { gap: 6px; }
  .tuner-workspace { grid-template-columns: var(--gauge-size) minmax(0, 1fr); align-items: center; gap: 8px; }
  .note-display { font-size: 56px; }
  .frequency-display { font-size: 14px; letter-spacing: 0; }
  .arrow-indicator { font-size: 1.15rem; }
}
@media (min-width: 701px) and (max-height: 500px) {
  :root { --gauge-size: clamp(180px, 42dvh, 240px); --note-size: 48px; }
  .screen { padding: .75rem 1rem; }
  #tuner-screen { gap: .5rem; }
  .direction-message { min-height: 1.5rem; font-size: 1.125rem; }
  .tuner-workspace { gap: 2rem; padding: .5rem 0 1rem; }
  .note-display { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}