/* ==========================================================================
   Spielansicht: Kopf, Eingabe, Rateverlauf, Erfolgspanel
   ========================================================================== */

/* --------------------------------------------------------------- Spielkopf */
.game-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

.game-head__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.game-head__title {
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  margin-bottom: var(--space-2);
}

.game-head__lead {
  max-width: 54ch;
  margin-inline: auto;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.game-head__lead strong {
  color: var(--text);
}

/* ---------------------------------------------------------------- Eingabe */
.guess-panel {
  margin-bottom: var(--space-5);
}

.guess-form {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.btn--guess {
  height: 54px;
  padding-inline: var(--space-5);
  font-size: 0.95rem;
}

.guess-panel__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.guess-panel__count {
  flex: none;
  font-weight: 650;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.guess-panel__error {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bad-soft);
  color: var(--bad-text);
  font-size: 0.84rem;
  font-weight: 600;
  animation: shake 380ms var(--ease);
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ============================================================ Rateverlauf */

.board-wrap {
  margin-top: var(--space-4);
}

/* Spaltenkoepfe gibt es nur in der Desktop-Zeilenansicht. */
.board-head {
  display: none;
}

.board {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-subtle);
  font-size: 0.89rem;
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
}

.board-empty svg {
  width: 30px;
  height: 30px;
  opacity: 0.4;
}

/* ------------------------------------------------------------ Eine Zeile */
.guess {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-xs);
  animation: guess-in var(--t-med) var(--ease-back) both;
}

@keyframes guess-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

/* Die Gewinnzeile hebt sich deutlich ab. */
.guess.is-correct {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 30%, transparent), var(--shadow-md);
}

.guess__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
  min-width: 0;
}

.guess__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-subtle);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.guess.is-correct .guess__num {
  background: var(--ok);
  color: #fff;
}

.guess__emoji {
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}

.guess__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- Kacheln */
/* Mobile: 4 Spalten x 2 Zeilen. Bei 320 px Breite bleiben ~70 px pro
   Kachel – genug fuer alle vorkommenden Kurzwerte. */
.guess__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: var(--space-1) 3px;
  border-radius: var(--radius-md);
  text-align: center;
  overflow: hidden;
  /* Gestaffelt aufdecken – --d wird beim Rendern gesetzt. */
  animation: tile-in 260ms var(--ease-back) both;
  animation-delay: calc(var(--d, 0) * 55ms);
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(-4px);
  }
}

.tile__label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.72;
  line-height: 1;
}

.tile__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: clamp(0.66rem, 2.7vw, 0.78rem);
  font-weight: 650;
  line-height: 1.12;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.tile__value svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Feedback-Farben */
.tile.is-match {
  background: var(--ok);
  color: #fff;
}

.tile.is-partial {
  background: var(--warn);
  color: var(--warn-fg);
}

.tile.is-miss {
  background: var(--bad);
  color: #fff;
}

/* Symbole fuer Farbsehschwaeche (Einstellung). */
.tile::after {
  content: attr(data-symbol);
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

:root[data-symbols='on'] .tile::after {
  opacity: 0.75;
}

/* Mehrfachwerte (Lebensraum, Kontinent) als Mini-Chips. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 3px;
}

.chip {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.22);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.tile.is-partial .chip {
  background: rgb(0 0 0 / 0.14);
}

/* Farbpunkte */
.dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 0.25);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
}

/* ============================================ Desktop: echte Tabellenzeile */
@media (min-width: 900px) {
  .board-head {
    display: grid;
    grid-template-columns: minmax(168px, 1.6fr) repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 0 var(--space-2) var(--space-2);
    margin-bottom: var(--space-1);
  }

  .board-head__cell {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-subtle);
    text-align: center;
  }

  .board-head__cell--name {
    text-align: left;
    padding-left: var(--space-2);
  }

  .guess {
    display: grid;
    grid-template-columns: minmax(168px, 1.6fr) repeat(8, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  /* In der Zeilenansicht darf der Name umbrechen statt abgeschnitten zu
     werden – "Kaiserpinguin" muss vollstaendig lesbar bleiben. */
  .guess__name {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    line-height: 1.15;
  }

  /* Kachel-Container aufloesen, damit die Kacheln direkte Grid-Kinder werden. */
  .guess__tiles {
    display: contents;
  }

  .guess__head {
    padding: 0 var(--space-2);
  }

  /* Spaltenkoepfe stehen bereits oben – Labels in den Kacheln sparen wir uns. */
  .tile__label {
    display: none;
  }

  .tile {
    min-height: 56px;
  }

  .tile__value {
    font-size: 0.8rem;
  }

  .chip {
    font-size: 0.66rem;
  }
}

/* ========================================================== Erfolgspanel */

.success {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-5);
  padding: var(--space-6) var(--space-4) var(--space-5);
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklab, var(--ok) 35%, var(--border));
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, color-mix(in oklab, var(--ok) 20%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-md);
  animation: success-in var(--t-slow) var(--ease-back) both;
}

@keyframes success-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.success__eyebrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ok-text);
  margin-bottom: var(--space-2);
}

.success__animal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.success__emoji {
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  line-height: 1;
  animation: pop 520ms var(--ease-back) both 120ms;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-14deg);
  }
}

.success__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Steckbrief des Tiers */
.success__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 560px;
  margin: 0 auto var(--space-5);
  text-align: left;
}

.success__fact {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  min-width: 0;
}

.success__fact dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.success__fact dd {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Je nach Ausgang sind ein, zwei oder drei Kennzahlen sichtbar
   (Streak entfällt beim Aufgeben, Countdown im Endlos-Modus).
   auto-fit verteilt die vorhandenen Boxen immer gleichmäßig –
   keine halbleeren Zeilen. */
.success__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
  max-width: 460px;
  margin: 0 auto var(--space-5);
}

.success__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.success__stat--wide {
  grid-column: 1 / -1;
}

.success__stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.success__stat-value--mono {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 0;
}

.success__stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Konfetti – dezent, nur wenige Teilchen, laeuft einmal durch. */
.success__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetto {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: fall var(--dur, 2200ms) var(--ease) var(--delay, 0ms) forwards;
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(-10px) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(320px) rotate(var(--spin, 420deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .success__confetti {
    display: none;
  }
}

/* ---------------------------------------------------------------- Legende */
.legend {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.legend__summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text-muted);
  list-style-position: inside;
}

.legend__summary::marker {
  color: var(--text-subtle);
}

.legend__summary:hover {
  color: var(--text);
}

.legend__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.legend__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.legend__list--modal {
  margin-top: var(--space-3);
}

.legend__chip {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-sm);
  color: #fff;
}

.legend__chip--match { background: var(--ok); }
.legend__chip--partial { background: var(--warn); color: var(--warn-fg); }
.legend__chip--miss { background: var(--bad); }
.legend__chip--arrow { background: var(--surface-sunken); color: var(--text); }

.legend__chip svg {
  width: 12px;
  height: 12px;
}

/* ============================================================ Breakpoints */

@media (min-width: 560px) {
  .success__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Ab dieser Breite passen auch drei Boxen nebeneinander – die
     Vollbreiten-Ausnahme für den Countdown wird dann nicht gebraucht. */
  .success__stat--wide {
    grid-column: auto;
  }
}

/* Sehr schmale Geraete (<= 340 px): Kacheln zweispaltig, damit nichts
   abgeschnitten wird. */
@media (max-width: 340px) {
  .guess__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guess-form {
    flex-wrap: wrap;
  }

  .btn--guess {
    width: 100%;
  }
}

/* Pfoten-Icon als Emoji-Ersatz im Erfolgspanel. */
.success__emoji--icon svg {
  width: clamp(2.6rem, 12vw, 3.6rem);
  height: clamp(2.6rem, 12vw, 3.6rem);
  margin-inline: auto;
  color: var(--accent);
}

/* Lange Kontinentlisten im Steckbrief ueber die volle Breite. */
.success__fact--wide {
  grid-column: 1 / -1;
}

@media (min-width: 560px) {
  .success__fact--wide {
    grid-column: span 2;
  }
}

/* ------------------------------------------------------ Aufgeben-Bereich */
.giveup-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

/* Ergebnispanel nach dem Aufgeben: gleiche Struktur, andere Stimmung.
   Kein Grün – der Spieler hat nicht gewonnen. */
.success--gaveup {
  border-color: color-mix(in oklab, var(--bad) 32%, var(--border));
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, color-mix(in oklab, var(--bad) 16%, transparent), transparent 70%),
    var(--surface);
}

.success--gaveup .success__eyebrow {
  color: var(--bad-text);
}