/* Klang-Player. Nutzt die Farbvariablen der Seite, mit eigenen Ersatzwerten. */
.tp {
  --tp-ink: var(--ink, #2A211C);
  --tp-brand: var(--petrol, #1E5A56);
  --tp-gold: var(--gold, #D9A441);
  --tp-hit: var(--copper, #A4492A);
  --tp-bg: var(--gold-soft, #F3E3C3);
  --tp-line: var(--line, #E2D6C6);
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(16px, 4vw, 28px);
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg, #FFFDF8, var(--tp-bg));
  color: var(--tp-ink);
  text-align: center;
}
.tp__title { margin: 0; font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
.tp__intro { margin: 0 auto; max-width: 34em; font-size: 1.08rem; line-height: 1.5; }

.tp__stage { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1; }
.tp__img, .tp__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp__img { object-fit: contain; pointer-events: none; user-select: none; }
.tp__svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; overflow: visible; }

.tp__tongue { cursor: pointer; outline: none; }
.tp__hit { fill: transparent; }
.tp__ring { fill: transparent; stroke: transparent; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: fill .25s, stroke .25s; }
.tp__label { font: 700 22px/1 var(--font, system-ui, sans-serif); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 4px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tp--labels .tp__label, .tp__tongue--next .tp__label { opacity: 1; }

@media (hover: hover) {
  .tp__tongue:hover .tp__ring { stroke: rgba(255, 255, 255, .75); }
}
.tp__tongue:focus-visible .tp__ring { stroke: var(--tp-brand); stroke-width: 6; }

.tp__tongue--next .tp__ring { stroke: var(--tp-gold); stroke-width: 7; fill: rgba(217, 164, 65, .35); animation: tp-pulse 1.1s ease-in-out infinite; }
.tp__tongue--hit .tp__ring { fill: rgba(255, 255, 255, .55); stroke: #fff; animation: tp-hit .6s ease-out; }

@keyframes tp-pulse { 50% { transform: scale(1.12); fill: rgba(217, 164, 65, .55); } }
@keyframes tp-hit { from { transform: scale(.85); } 40% { transform: scale(1.15); } to { transform: scale(1); fill: transparent; stroke: transparent; } }

.tp__tip {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(42, 33, 28, .82); color: #fff; font-size: 1rem; white-space: nowrap; pointer-events: none;
  animation: tp-bob 2s ease-in-out infinite;
}
@keyframes tp-bob { 50% { transform: translate(-50%, -4px); } }

.tp__caption { margin: -4px 0 0; font-size: .98rem; opacity: .8; }

.tp__controls { display: grid; gap: 14px; }
.tp__models, .tp__songs, .tp__modes, .tp__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tp__modes { padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--tp-line); justify-self: center; }

.tp button { font: inherit; cursor: pointer; }
.tp__mode, .tp__chip, .tp__btn {
  min-height: 48px; padding: 10px 18px; border-radius: 999px; font-size: 1.05rem; line-height: 1.2;
  border: 2px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.tp__mode { background: transparent; color: var(--tp-ink); }
.tp__mode[aria-pressed="true"] { background: var(--tp-brand); color: #fff; }
.tp__chip { background: #fff; color: var(--tp-ink); border-color: var(--tp-line); }
.tp__chip[aria-pressed="true"] { border-color: var(--tp-brand); background: var(--sage, #E3ECE6); font-weight: 700; }
.tp__btn { background: var(--tp-brand); color: #fff; font-weight: 700; }
.tp__btn--ghost { background: #fff; color: var(--tp-brand); border-color: var(--tp-brand); }
.tp button:focus-visible, .tp__toggle input:focus-visible { outline: 3px solid var(--tp-gold); outline-offset: 2px; }

.tp__song { display: grid; gap: 10px; }
.tp__song[hidden] { display: none; }
.tp__status { margin: 0; min-height: 1.5em; font-size: 1.1rem; font-weight: 700; color: var(--tp-brand); }
.tp--done .tp__status::before { content: "✓ "; }

.tp__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 1.05rem; cursor: pointer; }
.tp__toggle input { width: 24px; height: 24px; accent-color: var(--tp-brand); }

.tp__hint { margin: 0; font-size: .92rem; opacity: .75; }
@media (pointer: coarse) { .tp__hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tp *, .tp *::before { animation: none !important; transition: none !important; }
}