* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent: #a855f7;
  --accent-2: #ec4899;
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --bg: #09090f;
  --bg-card: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.45);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
body::before { width:500px; height:500px; background:var(--accent); top:-200px; right:-150px; }
body::after  { width:400px; height:400px; background:var(--accent-2); bottom:-150px; left:-100px; }

/* ── Scan Flash ── */
#scan-flash {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(16, 185, 129, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* ── Error Toast ── */
.error-toast {
  background:rgba(239,68,68,0.15) !important;
  border-color:rgba(239,68,68,0.5) !important;
  color:#f87171 !important;
}

/* ── Landscape Overlay ── */
.landscape-overlay {
  position:fixed; inset:0; z-index:2000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.landscape-box { display:flex; flex-direction:column; align-items:center; gap:0.75rem; text-align:center; }
.landscape-icon { font-size:3.5rem; animation:spin90 1.2s ease-in-out infinite alternate; }
@keyframes spin90 { from{transform:rotate(0deg);} to{transform:rotate(-90deg);} }
.landscape-title { font-size:1.3rem; font-weight:800; }
.landscape-sub { font-size:0.88rem; color:var(--text-muted); }

/* ── Duplicate Toast ── */
.toast {
  position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
  background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.5);
  color: #fbbf24; font-size: 0.85rem; font-weight: 600;
  padding: 0.6rem 1.2rem; border-radius: 2rem; z-index: 800;
  backdrop-filter: blur(12px); white-space: nowrap;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateX(-50%) translateY(-12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── App Shell ── */
.app-shell {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 0 1.25rem 1.5rem;
}

/* ── Header ── */
.app-header { text-align: center; padding: 3rem 0 1.5rem; }
.logo { display:flex; align-items:center; justify-content:center; gap:0.6rem; margin-bottom:0.5rem; }
.logo-icon { font-size:2rem; filter:drop-shadow(0 0 12px var(--accent)); }
h1 {
  font-size: 2.6rem; font-weight: 900; letter-spacing: 0.15em;
  background: var(--accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tagline { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 0.05em; }

/* ── Main ── */
.app-main { flex:1; display:flex; flex-direction:column; align-items:center; gap:1.25rem; }

/* ── Scanner ── */
.scanner-container {
  display: none; position: relative; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.2), 0 20px 60px rgba(0,0,0,0.5);
}
#qr-video { width:100%; display:block; border-radius:var(--radius); }
.btn-cancel {
  position:absolute; top:0.75rem; right:0.75rem; z-index:10;
  display:flex; align-items:center; gap:0.4rem;
  background:rgba(0,0,0,0.7); border:1px solid var(--border);
  color:#fff; font-size:0.85rem; font-weight:600;
  padding:0.4rem 0.9rem; border-radius:2rem; cursor:pointer;
  backdrop-filter:blur(8px); transition:background 0.2s;
}
.btn-cancel:hover { background:rgba(236,72,153,0.3); border-color:var(--accent-2); }

/* ── Scan Button ── */
.scan-section { width:100%; display:flex; justify-content:center; padding:1rem 0; }
.btn-scan {
  display:flex; align-items:center; gap:0.75rem;
  background:var(--accent-gradient); color:#fff;
  font-size:1.1rem; font-weight:700;
  padding:1rem 2.5rem; border:none; border-radius:2rem; cursor:pointer;
  box-shadow:0 4px 24px rgba(168,85,247,0.4);
  transition:transform 0.15s, box-shadow 0.15s;
}
.btn-scan:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(168,85,247,0.55); }
.btn-scan:active { transform:translateY(0); }

/* ── Dimm Overlay ── */
.dim-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.82);
  cursor:pointer;
  animation:fadeIn 0.8s ease;
}
.dim-overlay::after {
  content:"Tippen zum Fortfahren";
  position:absolute; bottom:28%; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.22); font-size:0.8rem; letter-spacing:0.06em;
  white-space:nowrap;
}

/* ── Now Playing Card (Vinyl wrapper) ── */
.now-playing-card {
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:1.25rem;
  animation:slideUp 0.35s ease;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Vinyl Scene (wrapper for disc + tonearm) ── */
.vinyl-scene {
  position:relative;
  width: min(300px, 85vw);
  aspect-ratio:1;
}

/* ── Tonearm ── */
.tonearm {
  position:absolute;
  width:32%;
  top:-4%;
  right:-13%;
  z-index:5;
  pointer-events:none;
  transform-origin:74% 8%;
  transform:rotate(28deg);
  transition:transform 1.1s cubic-bezier(0.25,0.46,0.45,0.94);
  filter:drop-shadow(1px 3px 6px rgba(0,0,0,0.8));
}
.now-playing-card[data-playing="true"] .tonearm {
  transform:rotate(2deg);
}

/* ── Vinyl Disc ── */
.vinyl-disc {
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 29%, #09090f 29%),
    repeating-radial-gradient(
      circle,
      #0e0e1a 0px, #0e0e1a 3px,
      #191926 3px, #191926 5px
    );
  box-shadow:
    0 0 0 2px #252535,
    0 0 0 3px #111120,
    0 24px 64px rgba(0,0,0,0.7),
    inset 0 0 40px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center;
}

/* Conic sheen — makes rotation visible */
.vinyl-disc::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,255,255,0.045) 18deg,
    transparent 55deg,
    transparent 170deg,
    rgba(255,255,255,0.025) 195deg,
    transparent 230deg,
    transparent 360deg
  );
  pointer-events:none;
}

/* Spin animation on playing */
.now-playing-card[data-playing="true"] .vinyl-disc {
  animation: vinylSpin 9s linear infinite;
}
/* Counter-rotate label so text stays readable */
.now-playing-card[data-playing="true"] .vinyl-label {
  animation: vinylSpinReverse 9s linear infinite;
}
@keyframes vinylSpin        { to { transform: rotate(360deg); } }
@keyframes vinylSpinReverse { to { transform: rotate(-360deg); } }

/* ── Vinyl Label (center circle) ── */
.vinyl-label {
  position:relative; z-index:1;
  width:48%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #2d1b52 0%, #1a1035 50%, #120b28 100%);
  border:2px solid rgba(168,85,247,0.45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 24px rgba(168,85,247,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  overflow:hidden; cursor:pointer;
}

/* ── Label content ── */
.np-label { display:flex; align-items:center; gap:4px; font-size:0.6rem; font-weight:700; letter-spacing:0.12em; color:rgba(168,85,247,0.9); text-transform:uppercase; }
.np-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); animation:blink 1.5s ease-in-out infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ── Visualizer (inside label) ── */
.visualizer { display:flex; align-items:flex-end; justify-content:center; gap:3px; height:22px; opacity:0.3; transition:opacity 0.4s; }
.visualizer.muted span { background:rgba(255,255,255,0.25) !important; }
.visualizer span { width:4px; border-radius:2px; background:var(--accent-gradient); height:4px; }
.now-playing-card[data-playing="true"] .visualizer { opacity:1; }
.now-playing-card[data-playing="true"] .visualizer span:nth-child(1) { animation:bar 0.9s ease-in-out infinite alternate; }
.now-playing-card[data-playing="true"] .visualizer span:nth-child(2) { animation:bar 0.7s ease-in-out 0.10s infinite alternate; }
.now-playing-card[data-playing="true"] .visualizer span:nth-child(3) { animation:bar 1.1s ease-in-out 0.20s infinite alternate; }
.now-playing-card[data-playing="true"] .visualizer span:nth-child(4) { animation:bar 0.8s ease-in-out 0.05s infinite alternate; }
.now-playing-card[data-playing="true"] .visualizer span:nth-child(5) { animation:bar 1.0s ease-in-out 0.15s infinite alternate; }
@keyframes bar { 0%{height:3px;} 100%{height:20px;} }

/* ── Play Button (inside vinyl label) ── */
.btn-play {
  width:58px; height:58px; border-radius:50%; border:none;
  background:var(--accent-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 18px rgba(168,85,247,0.55);
  transition:transform 0.15s, box-shadow 0.15s; flex-shrink:0;
}
.btn-play:hover { transform:scale(1.1); box-shadow:0 6px 24px rgba(168,85,247,0.7); }
.btn-play:active { transform:scale(0.94); }
.btn-play[data-state="playing"]   { background:linear-gradient(135deg,#10b981 0%,#059669 100%); box-shadow:0 4px 18px rgba(16,185,129,0.55); }
.btn-play[data-state="buffering"] { background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%); box-shadow:0 4px 18px rgba(245,158,11,0.55); }

.np-duration { font-size:0.65rem; color:rgba(255,255,255,0.5); letter-spacing:0.04em; }

/* ── Controls row below vinyl ── */
.vinyl-actions {
  display:flex; align-items:center; justify-content:center; gap:0.75rem; width:100%;
}

/* ── Skip Buttons ── */
.btn-skip {
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,0.05); color:var(--text-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  cursor:pointer; transition:background 0.2s, color 0.2s, transform 0.15s; flex-shrink:0;
}
.btn-skip svg { display:block; }
.btn-skip span { font-size:0.58rem; font-weight:700; line-height:1; }
.btn-skip:hover { background:rgba(168,85,247,0.15); color:var(--text); border-color:rgba(168,85,247,0.4); }
.btn-skip:active { transform:scale(0.9); }

/* ── Auflösen ── */
.btn-reveal {
  flex:1; background:transparent;
  border:1px solid rgba(168,85,247,0.35); color:var(--accent);
  font-size:0.9rem; font-weight:700;
  padding:0.6rem 1rem; border-radius:var(--radius-sm); cursor:pointer;
  transition:background 0.2s, border-color 0.2s; white-space:nowrap;
}
.btn-reveal:hover { background:rgba(168,85,247,0.1); border-color:var(--accent); }

.reveal-panel {
  width:100%; background:rgba(168,85,247,0.08);
  border:1px solid rgba(168,85,247,0.25); border-radius:var(--radius-sm);
  padding:1rem 1.25rem; text-align:center;
  animation:revealIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes revealIn { from{opacity:0;transform:scale(0.9);} to{opacity:1;transform:scale(1);} }
.reveal-artist { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; color:var(--accent); text-transform:uppercase; margin-bottom:0.3rem; }
.reveal-title { font-size:1.15rem; font-weight:800; line-height:1.3; }

/* ── Debug ── */
.debug-info { display:none; width:100%; background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.5rem 0.75rem; font-size:0.8rem; color:var(--text-muted); font-family:monospace; }
.debug-label { color:var(--accent); font-weight:600; }

/* ── Hidden ── */
.hidden { display: none !important; }

/* ── Footer / Settings ── */
.app-footer { margin-top:2rem; border-top:1px solid var(--border); padding-top:1.25rem; }

.settings-toggle-btn {
  display:flex; align-items:center; gap:0.5rem; width:100%;
  background:transparent; border:1px solid var(--border);
  color:var(--text-muted); font-size:0.85rem; font-weight:600;
  padding:0.55rem 0.9rem; border-radius:var(--radius-sm); cursor:pointer;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.settings-toggle-btn:hover { color:var(--text); border-color:var(--accent); background:rgba(168,85,247,0.08); }
.settings-toggle-btn svg:last-child { margin-left:auto; }
.settings-toggle-btn.open { color:var(--text); border-color:var(--accent); }
.settings-toggle-btn.open #settings-chevron { transform:rotate(180deg); }

.settings_div { margin-top:1rem; display:flex; flex-direction:column; gap:1rem; }
.settings-group { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:0.75rem; }
.settings-group-title { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:0.25rem; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:0.9rem; color:rgba(255,255,255,0.8); cursor:pointer; }

input.toggle { appearance:none; -webkit-appearance:none; width:44px; height:24px; border-radius:12px; background:rgba(255,255,255,0.15); cursor:pointer; position:relative; flex-shrink:0; transition:background 0.2s; }
input.toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform 0.2s; }
input.toggle:checked { background:var(--accent-gradient); }
input.toggle:checked::after { transform:translateX(20px); }

.number-input { width:72px; background:rgba(255,255,255,0.08); border:1px solid var(--border); border-radius:var(--radius-sm); color:#fff; font-size:0.9rem; padding:0.35rem 0.6rem; text-align:center; flex-shrink:0; }
.number-input:focus { outline:none; border-color:var(--accent); }

.volume-slider {
  -webkit-appearance:none; appearance:none;
  width:120px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.15); outline:none; flex-shrink:0; cursor:pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--accent); cursor:pointer;
  box-shadow:0 0 6px rgba(168,85,247,0.5);
}
.volume-slider::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:none;
  background:var(--accent); cursor:pointer;
}

.btn-pwa-inline {
  background:var(--accent-gradient); border:none; color:#fff;
  font-size:0.8rem; font-weight:700; padding:0.4rem 1rem;
  border-radius:2rem; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.btn-pwa-inline:disabled { opacity:0.4; cursor:default; }

.cookie-list { font-size:0.75rem; color:var(--text-muted); font-family:monospace; word-break:break-all; }
.btn-debug { background:transparent; border:1px solid var(--border); color:var(--text-muted); font-size:0.8rem; padding:0.4rem 0.9rem; border-radius:var(--radius-sm); cursor:pointer; transition:color 0.2s, border-color 0.2s; align-self:flex-start; }
.btn-debug:hover { color:var(--text); border-color:var(--text-muted); }

/* ── PWA Install Modal ── */
.pwa-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.pwa-modal-box {
  background: #1a1025;
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: var(--radius);
  padding: 2rem 1.5rem 1.75rem;
  width: 100%; max-width: 340px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: slideUp 0.25s ease;
}
.pwa-modal-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: transparent; border: none;
  color: var(--text-muted); font-size: 1rem; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.pwa-modal-close:hover { color: var(--text); }
.pwa-modal-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.pwa-modal-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.25rem; }

.pwa-steps { text-align: left; display: flex; flex-direction: column; gap: 0.75rem; }
.pwa-step {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.4;
}
.pwa-step-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800;
}
.pwa-note {
  margin-top: 1rem; font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width:480px) {
  h1 { font-size:2.2rem; }
  .btn-scan { padding:0.9rem 2rem; font-size:1rem; }
  .btn-play { width:64px; height:64px; }
}