/* Kaminfeuer: dark and warm, one big button. Colours meet WCAG AA (text ≥ 4.5:1, controls ≥ 3:1). */
:root { --bg: #1a0f0a; --text: #fdf2e9; --muted: #d6c2b4; --accent: #fb923c; --accent-ink: #1a0f0a; --line: #a8806a; --focus: #fde047; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: radial-gradient(ellipse at 50% 85%, #4a1d0c 0%, var(--bg) 65%); color: var(--text);
  font: 1.1rem/1.45 system-ui, -apple-system, sans-serif; }
main { min-height: 100%; max-width: 26rem; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
h1 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: .02em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.play { width: 9rem; height: 9rem; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 0 40px rgba(251, 146, 60, .35); }
.play svg { width: 3rem; height: 3rem; fill: currentColor; }
.play .icon-pause, .play[aria-pressed="true"] .icon-play { display: none; }
.play[aria-pressed="true"] .icon-pause { display: block; }
.play:disabled { opacity: .45; cursor: default; box-shadow: none; }

.volume { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.volume label { grid-column: 1 / -1; font-weight: 600; }
.volume input { width: 100%; min-height: 44px; accent-color: var(--accent); }
.volume output { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.status { min-height: 1.45em; margin: 0; color: var(--muted); text-align: center; }