/* Tippspiel -- bewusst im dunklen Corporate-Design (wie wervonkc.js/
   guessgame.js), keine eigene Farbwelt wie Rudern/Blobby Volley -- ist eher
   ein durchgehend mitlaufendes Utility-Minispiel als eine eigene "Szene". */
body.tp-body { background: var(--bg); margin: 0; padding: 12px 10px; }
.tp-page {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  font-family: 'Jost', system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  padding: 12px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tp-title {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  margin: 0;
  text-align: center;
}
.hidden { display: none !important; }

.tp-status-card {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 20px 22px;
  text-align: center;
  color: var(--text-2);
}

.tp-layout { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.tp-intro {
  margin: 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--surface-2);
  border: 2px solid var(--accent);
  border-radius: var(--r-l);
  padding: 16px 18px;
}
.tp-intro-eyebrow {
  display: block;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .4rem;
}

.tp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 16px 18px;
}
.tp-round-title { margin: 0 0 4px; font-family: 'Jost', system-ui, sans-serif; font-size: 17px; font-weight: 700; }
.tp-hint { margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); }

/* ---- Drag & Drop ------------------------------------------------------- */
.tp-pool {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 44px;
  padding: 10px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-m);
}
.tp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 5px;
  font-size: 13px; font-weight: 600;
  cursor: grab;
  user-select: none;
}
.tp-chip:active { cursor: grabbing; }
.tp-chip.is-in-slot { background: var(--surface); }
.tp-chip-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  background-size: cover; background-position: center;
}

.tp-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.tp-slot { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: 10px; }
.tp-slot-label { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.tp-slot-drop {
  min-height: 44px;
  display: flex; align-items: center;
  border: 2px dashed var(--border);
  border-radius: var(--r-s);
  padding: 4px;
}
.tp-slot-empty { font-size: 12px; color: var(--text-2); padding: 8px; }

.tp-btn {
  margin-top: 14px; border: none; border-radius: var(--r-m); padding: .75rem 1.25rem;
  font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 18px rgba(255, 61, 148, .35);
  display: inline-block; text-decoration: none;
}
.tp-btn:hover { filter: brightness(1.08); }
.tp-btn:disabled { opacity: .4; cursor: not-allowed; }
.tp-submit-status { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }

/* Nachtrag (2026-09-25, passi-Feedback "Warnmeldung sieht aus wie Browser-
   Systemdialog"): eigenes Bestaetigungs-Overlay statt window.confirm(),
   position:fixed (nicht absolute wie rd-overlay) -- tp-tip-form hat keinen
   eigenen Positionierungs-Kontext, das Overlay soll den ganzen Viewport
   abdecken, egal wo im DOM es haengt. */
.tp-overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 14, .78);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20;
}
.tp-overlay-card {
  background: var(--surface); color: var(--text); border-radius: var(--r-l);
  border: 1px solid var(--border); padding: 22px 24px; max-width: 360px; text-align: center;
}
.tp-overlay-card p { margin: 10px 0 16px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tp-overlay-actions { display: flex; flex-direction: column; gap: 8px; }
.tp-btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); margin-top: 0; box-shadow: none; }
.tp-btn-secondary:hover { border-color: var(--accent); }

/* ---- Schon getippt --------------------------------------------------------- */
.tp-my-tip-row, .tp-standing-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: 7px 12px; font-size: 13px; margin-bottom: 6px;
}
.tp-standing-row.is-me { border-color: var(--accent); }
/* Passi (Ausrichter) tippt/erscheint mit (passi-Wunsch, 2026-09-25), aber
   sichtbar abgesetzt -- gedaempft statt farbig hervorgehoben, macht auf
   einen Blick klar: zaehlt mit, gewinnt aber nie. Bewusst opacity statt
   background -- ueberschreibt dadurch nie das Gruen/Rot der Ergebnis-Matrix
   (siehe Kommentar bei .tp-matrix tr.is-me weiter unten). */
.tp-standing-row.is-host { opacity: .65; }
.tp-matrix tr.is-host { opacity: .65; }

.tp-standing-rank { width: 22px; flex: none; color: var(--text-2); font-weight: 700; }
.tp-standing-name { flex: 1; text-align: left; }
.tp-standing-pts { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Ergebnis-Matrix (passi-Wunsch, 2026-09-24): erst neutral, nach 5 Sek.
   gruen/rot (tippspiel.js, buildResultMatrix()). Eigener Wrapper mit
   overflow-x:auto, damit 6+ Spalten (Name + 4 Slots) auf schmalen
   Bildschirmen nicht das Layout sprengen. */
.tp-matrix-wrap { overflow-x: auto; margin-bottom: 10px; }
.tp-matrix { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 12.5px; }
.tp-matrix th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); padding: 0 8px 4px; text-align: center; }
.tp-matrix th:first-child { text-align: left; }
.tp-matrix td { padding: 7px 8px; background: var(--surface-2); text-align: center; white-space: nowrap; }
.tp-matrix tr td:first-child { border-radius: 8px 0 0 8px; text-align: left; }
.tp-matrix tr td:last-child { border-radius: 0 8px 8px 0; }
.tp-matrix-name { font-weight: 600; }
/* Bugfix (live gefunden, 2026-09-24): eine Hintergrundfarbe hier haette
   staerkere Spezifitaet als .is-correct/.is-wrong (2 Klassen+2 Typen vs. 2
   Klassen) und wuerde deren gruen/rot-Hintergrund in der eigenen Zeile
   unterdruecken -- stattdessen ein Rahmen-Akzent, der nichts ueberschreibt. */
.tp-matrix tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tp-matrix-actual-row td { background: transparent; color: var(--accent); font-weight: 700; border-bottom: 1px solid var(--border); border-radius: 0 !important; padding-bottom: 10px; }
.tp-matrix-cell.is-empty { color: var(--text-2); }
.tp-matrix-cell.is-correct, .tp-matrix-cell.is-wrong { transition: background-color .5s ease, color .5s ease; font-weight: 700; }
.tp-matrix-cell.is-correct { background: rgba(70, 200, 130, .28); color: #7fe9c0; }
.tp-matrix-cell.is-wrong { background: rgba(230, 80, 80, .22); color: var(--bad); }

.tp-result-chart-title { margin-top: 16px; }

/* ---- Abschluss ------------------------------------------------------------ */
.tp-final-card { text-align: center; }
.tp-final-medal { font-size: 48px; line-height: 1; margin: 4px 0; }
.tp-final-winner { margin: 2px 0 14px; font-family: 'Jost', system-ui, sans-serif; font-size: clamp(24px, 3.4vw, 38px); white-space: nowrap; font-weight: 700; color: var(--accent); }
.tp-hub-link { margin-top: 14px; }

@media (max-width: 480px) {
  .tp-slots { grid-template-columns: 1fr; }
}