/* ============================================================================
   sound-control.css – Soundbrett (Handy + PC).
   Große, touch-freundliche Knöpfe; einer nach dem anderen tippen. Baut auf
   theme.css auf (Tokens, .hc-badge, Keyframes). Mobile-first, skaliert auf PC.
   ========================================================================== */

:root {
  --snd-max: 560px;
  --snd-pad: 16px;
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
}

body { min-height: 100dvh; }

.snd {
  width: 100%;
  max-width: var(--snd-max);
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--snd-pad) + var(--sa-top))
    calc(var(--snd-pad) + var(--sa-right))
    calc(var(--snd-pad) + var(--sa-bottom))
    calc(var(--snd-pad) + var(--sa-left));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------------------------------------------------------------- Kopf ---- */
.snd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.snd-brand { margin: 0; font-size: 0.72rem; color: var(--muted); }
.snd-hint { font-size: 0.62rem; }

/* ------------------------------------------------------- Knopf-Basis ------ */
.snd-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  padding: 18px 14px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.snd-btn:active { transform: scale(0.97); }
.snd-btn:focus-visible { outline: none; border-color: var(--cold-b); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.3); }
.snd-btn:disabled { cursor: default; }

/* Akzentlinie oben – pro Knopf eingefärbt. */
.snd-btn::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, var(--line-strong));
  opacity: 0.95;
}
.snd-btn[data-accent="hot"]  { --accent: linear-gradient(90deg, var(--hot-a), var(--hot-c)); }
.snd-btn[data-accent="warm"] { --accent: linear-gradient(90deg, var(--hot-a), var(--hot-b)); }
.snd-btn[data-accent="cold"] { --accent: linear-gradient(90deg, var(--cold-a), var(--cold-c)); }
.snd-btn[data-accent="cool"] { --accent: linear-gradient(90deg, var(--cold-a), var(--cold-b)); }

.snd-btn__emoji { font-size: 2rem; line-height: 1; }
.snd-btn__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
}
.snd-btn__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.15em 0.6em;
}

/* Kurzer „Ping"-Effekt beim Abspielen. */
.snd-btn.is-hit { animation: snd-hit 0.4s ease; }
@keyframes snd-hit {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); }
}

/* --------------------------------------------------- Primär (mit Video) --- */
.snd-primary .snd-btn {
  flex-direction: row;
  gap: 14px;
  justify-content: flex-start;
  padding: 20px 18px;
  min-height: 92px;
  background: linear-gradient(135deg, rgba(47, 139, 255, 0.16), rgba(23, 70, 224, 0.10)), var(--panel);
  border-color: rgba(79, 182, 255, 0.4);
}
.snd-primary .snd-btn__emoji { font-size: 2.4rem; }
.snd-primary .snd-btn__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.snd-primary .snd-btn__label { font-size: 1.2rem; }

/* Video-Kennzeichnung + Cooldown-Zustand. */
.snd-btn__video {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cold-a);
}
.snd-btn__video::before { content: '▶'; font-size: 0.8em; }
.snd-btn.is-playing { border-color: rgba(79, 182, 255, 0.75); box-shadow: 0 0 0 3px rgba(47, 139, 255, 0.25); }
.snd-btn.is-playing .snd-btn__video { color: #7fe4ff; animation: hc-pulse 1.2s ease-in-out infinite; }

/* --------------------------------------------------------------- Raster --- */
.snd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.snd-grid .snd-btn { min-height: 116px; }

/* --------------------------------------------------------------- Fuß ------ */
.snd-foot {
  margin-top: auto;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding-top: 6px;
}

/* ------------------------------------------------------------- Toasts ----- */
.snd-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--sa-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  width: min(92vw, 420px);
  pointer-events: none;
}
.snd-toast {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.7em 1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: snd-toast-in 0.2s ease;
}
.snd-toast.is-err { border-color: rgba(255, 138, 138, 0.5); color: #ffb3b3; }
@keyframes snd-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Etwas mehr Luft auf großen Screens (PC). */
@media (min-width: 480px) {
  :root { --snd-pad: 22px; }
  .snd-btn__emoji { font-size: 2.2rem; }
}