/* Joculus Studios — wiki-sonaris.css
   Nur für das SONARIS-Wiki: Echo-Demo und Glühperlen-Merkspiel.
   Frequenzfarben wie im Spiel: Mint #72e4cd, Violett #b6a0f2, Gold #ffd784. */

.so-echo, .so-perlen { margin: 20px 0 30px; max-width: 640px; }
.so-echo canvas {
  display: block; width: 100%; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(114, 228, 205, 0.15), var(--shadow-card);
}
.so-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.so-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 0.9rem var(--font-body);
  touch-action: manipulation;
}
.so-btn:hover { background: var(--surface-hover); }
.so-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.so-btn-ghost { background: transparent; }
.so-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.so-freq { min-width: 64px; }
.so-freq[aria-pressed="true"] { border-color: var(--so-freq); box-shadow: inset 0 0 0 1px var(--so-freq); color: var(--so-freq); }
.so-btn-primary { border-color: #72e4cd; color: #72e4cd; }
.so-msg { min-height: 1.6em; margin: 10px 0 0 !important; font-size: 0.9rem; color: var(--text-faint); }
.so-trail { min-height: 1.4em; margin: 4px 0 0 !important; font-size: 0.86rem; color: var(--text-muted); }

.so-quelle { font-size: 0.86rem; color: var(--text-faint); }
.wiki-content kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; text-align: center;
  border: 1px solid var(--border-strong); background: var(--surface); font: 600 0.82rem var(--font-body);
}

.so-perlen {
  padding: 18px; border-radius: 14px; border: 1px solid var(--border);
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 211, 148, 0.12), transparent 70%), var(--bg-elevated);
}
.so-perlen-folge {
  margin: 4px 0 0 !important; text-align: center; font: 700 2rem var(--font-display);
  color: #ffd394; letter-spacing: 0.04em; min-height: 1.4em;
}
.so-perlen .so-tools { justify-content: center; }
.so-perlen .so-msg { text-align: center; }
.so-perle {
  width: 52px; height: 52px; padding: 0; font-size: 1.1rem;
  background: radial-gradient(circle at 35% 30%, #fff6dc, #ffd394 45%, #c98f45);
  color: #3a2508; border-color: rgba(255, 211, 148, 0.6);
}
.so-perle:hover { background: radial-gradient(circle at 35% 30%, #fffaf0, #ffe0ad 45%, #d9a056); }