/* Eloquaria – Mobile-first Grundlayout. Der Seitenhintergrund folgt dem
   aktuellen Rang über --rank-color. */
:root {
  --rank-color: #BB8FCE;      /* MAGIC als Start */
  --bg: #14121a;
  --panel: rgba(20, 18, 26, 0.82);
  --panel-solid: #1e1b28;
  --text: #f2eefa;
  --text-dim: #b3abc4;
  --accent: #ffd166;
  --danger: #ff6b6b;
  --ok: #7bd88f;
  --vowel: #ffe3a3;
  --consonant: #f5f2fb;
  --radius: 14px;
  font-size: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rank-color) 55%, var(--bg)) 0%, var(--bg) 70%);
  transition: background 0.8s ease;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  font: inherit;
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  background: var(--panel-solid);
  color: var(--text);
  cursor: pointer;
}
button.primary { background: var(--accent); color: #241c00; font-weight: 700; }
button:disabled { opacity: 0.5; cursor: default; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid #3a3450;
  background: #241f33;
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

a { color: var(--accent); text-decoration: none; }

.hidden { display: none !important; }

/* --- Auth-Seite --- */
.auth-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 1.2rem;
}
.logo {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.logo .hexline { display: flex; gap: 0.3rem; justify-content: center; }
.card {
  width: min(400px, 100%);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.card h2 { font-size: 1.1rem; font-weight: 600; }
.field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.msg { min-height: 1.3em; font-size: 0.9rem; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }
.switch-line { font-size: 0.9rem; color: var(--text-dim); text-align: center; }

.lang-switch { display: flex; gap: 0.4rem; justify-content: center; }
.lang-switch button {
  padding: 0.3rem 0.7rem; font-size: 0.85rem; border-radius: 999px;
  background: rgba(255,255,255,0.1);
}
.lang-switch button.active { background: var(--accent); color: #241c00; font-weight: 700; }

/* --- Spielseite --- */
.game-wrap {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  /* Bezugsrahmen für das absolut positionierte Menü-Popup: sonst misst es
     seine Position von der Fensterkante und klebt auf breiten Desktops
     losgelöst ganz links statt unter dem ☰-Knopf. */
  position: relative;
}

.icon-btn {
  background: rgba(255,255,255,0.12);
  padding: 0.4rem 0.7rem;
  font-size: 1.1rem;
}

.menu-dropdown {
  position: absolute;
  top: 3.2rem;
  left: 0.6rem;
  z-index: 50;
  background: var(--panel-solid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.menu-dropdown a { padding: 0.35rem 0.2rem; color: var(--text); }
/* Nachgeordnete Menüpunkte (z. B. "auf allen Geräten abmelden") treten
   optisch zurück – sie sind der seltene Sonderfall, nicht der Normalweg. */
.menu-dropdown .menu-sub {
  font-size: 0.82rem;
  opacity: 0.75;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
}
.menu-dropdown a:active { color: var(--accent); }
.menu-head { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.menu-credits { color: var(--accent); font-size: 0.9rem; }

.word-bar {
  position: relative;
  min-height: 3.4rem;
  margin: 0.5rem 0.8rem 0;
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
}
.word-bar.committable {
  border-color: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(255, 209, 102, 0); }
}
.word-bar.shake { animation: shake 0.35s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
/* Feste Höhen: Die Wortleiste darf beim Tippen NIE wachsen, sonst
   verrutscht das Brett darunter. */
.word-display {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  height: 2.3rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.wletter { display: inline-block; }
.word-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  height: 1.1em;
  overflow: hidden;
}
.backspace-btn {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.65rem;
  font-size: 1.05rem;
  background: rgba(255,255,255,0.12);
}

.msg-line {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  /* FESTE Hoehe statt min-height: Vorher wuchs die Zeile mit dem Text und
     schob das Brett nach unten (eine lange Meldung kostete bis zu 24 px).
     Ueber dem Brett darf sich nichts in der Hoehe aendern. */
  height: 1.6rem;
  line-height: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-line.error { color: var(--danger); }
.msg-line.ok { color: var(--ok); }

/* Multiplikator-Stack: Overlay rechts oben ÜBER dem Brett – nimmt keinen
   Platz im Layout ein, das Hexagon-Gitter bleibt fest. */
.mult-stack {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  pointer-events: none;
}
#mult-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
/* Tauschpreis während des Ziehens. Sitzt ÜBER dem Multiplikator-Stapel im
   selben schwebenden Bereich, damit das Brett keine Höhe verliert. */
.drag-cost {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #1c1524;
  background: #F7DC6F;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
/* Guthaben reicht nicht – der Server würde den Tausch ablehnen. */
.drag-cost.unaffordable { background: #d9534f; color: #fff; }

.mult-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  color: #1c1524;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.board-container {
  flex: 1;
  position: relative;
  margin: 0.2rem 0.4rem;
  min-height: 0;
}
.board-container canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom));
}
.swap-hint { font-size: 0.7rem; color: var(--text-dim); text-align: right; flex: 1; }
@media (max-width: 480px) {
  .swap-hint { display: none; } /* schmale Screens: Platz für den Einloggen-Knopf */
}

/* Einloggen-Knopf mittig unten – einhändiges Spielen am Smartphone */
.commit-btn {
  background: var(--accent);
  color: #241c00;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255, 209, 102, 0.35);
}
.commit-btn:disabled { background: rgba(255,255,255,0.14); color: var(--text-dim); box-shadow: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--panel);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .stat { font-weight: 700; }
.topbar .rank-badge {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--rank-color);
  color: #1c1524;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* --- Unterseiten (Sammlung, Markt, Rangliste, …) --- */
.page-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.8rem 0.8rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.page-head h1 { font-size: 1.25rem; }
.back-link { font-size: 0.9rem; white-space: nowrap; }

.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tabs button {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  font-size: 0.9rem;
}
.tabs button.active { background: var(--accent); color: #241c00; font-weight: 700; }

.list { display: flex; flex-direction: column; gap: 0.5rem; }
.list-item {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.list-item .grow { flex: 1; min-width: 0; }
.word-chip {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}
.meta { font-size: 0.78rem; color: var(--text-dim); }
.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
}
.price-tag { font-weight: 800; color: var(--accent); white-space: nowrap; }
.small-btn { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.empty-note { color: var(--text-dim); text-align: center; padding: 1.5rem 0; }

.lb-row { display: flex; align-items: center; gap: 0.7rem; }
.lb-pos { width: 2.2rem; text-align: right; font-weight: 800; color: var(--text-dim); }
.lb-row.top1 .lb-pos { color: gold; }
.lb-row.top2 .lb-pos { color: silver; }
.lb-row.top3 .lb-pos { color: #cd7f32; }
.period-nav { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.period-nav .label { min-width: 11rem; text-align: center; font-weight: 600; font-size: 0.95rem; }

.form-row { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 130px; }

/* --- Modale --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 6, 12, 0.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  width: min(380px, 100%);
  background: var(--panel-solid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.modal h2 { font-size: 1.05rem; }
/* Der volle Werkzeugkasten im Spiel ist hoch – scrollbar halten, damit er auf
   das Handy passt. Die Kopfzeile mit den Werten bleibt oben stehen. */
.admin-panel-modal {
  width: min(440px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  gap: 0.4rem;
}
.admin-panel-modal .stats-head { margin-top: 0.3rem; }
.admin-panel-modal .tool-row { margin: 0; }

.setting-row {
  display: grid;
  grid-template-columns: 4.5rem 2.4rem 1fr;
  align-items: center;
  gap: 0.6rem;
}
.setting-row label { font-size: 0.9rem; color: var(--text-dim); }
.mute-btn { padding: 0.25rem 0.4rem; font-size: 0.95rem; background: rgba(255,255,255,0.1); }
.mute-btn.muted { background: rgba(255,107,107,0.3); }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent), var(--accent)) no-repeat #3a3450;
  background-size: var(--fill, 100%) 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #241c00;
  cursor: pointer;
}

.joker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}
.joker-grid button {
  padding: 0.5rem 0;
  font-weight: 800;
  font-size: 1rem;
  background: rgba(255,255,255,0.12);
}
/* Kombi-Bereich: breitere Knöpfe für 2–3 Zeichen, optisch abgesetzt */
.joker-grid.joker-combos {
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 0.5rem;
}
.joker-grid.joker-combos button { font-size: 0.9rem; }

/* Modal-Aufwärmphase: verhindert Ghost-Clicks (Tipp öffnet Modal, der
   nachfolgende click darf nicht sofort einen Knopf treffen) */
.modal-backdrop.warming button { pointer-events: none; }
.joker-grid .animal-btn { font-size: 1.6rem; padding: 0.4rem 0; }

/* --- Effekt-Ebenen --- */
#flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
}
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}
.wletter-clone {
  position: fixed;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.4, 1), opacity 0.7s ease-out;
  will-change: transform, opacity;
}
.score-float {
  position: fixed;
  transform: translateX(-50%);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  animation: floatUp 1.3s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0% { opacity: 0; margin-top: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; margin-top: -90px; }
}
.shake-hard { animation: shakeHard 0.5s; }
@keyframes shakeHard {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 3px); }
}
.wletter.bridge { color: var(--text-dim); }

/* --- Spielen-Hub --- */
.hub-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.8rem 0.9rem 2.5rem;
  min-height: 100dvh;
}
.hub-head { display: flex; align-items: center; justify-content: space-between; }
.logo-sm { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.2em; }
.hub-greeting { margin: 0.6rem 0 0.2rem; color: var(--text-dim); font-size: 0.95rem; }
.resume-banner {
  width: 100%; margin: 0.6rem 0; padding: 0.75rem;
  background: var(--accent); color: #241c00; font-weight: 800; border-radius: var(--radius);
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.mode-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 1rem; min-height: 6.5rem;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); text-align: left;
}
.mode-tile:active { transform: scale(0.98); }
.mode-tile.disabled { opacity: 0.45; }
.mode-emoji { font-size: 1.9rem; }
.mode-name { font-weight: 800; font-size: 1.05rem; }
.mode-desc { font-size: 0.78rem; color: var(--text-dim); }

.versus-panel {
  margin-top: 1rem; background: var(--panel); border-radius: var(--radius);
  padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.versus-panel h2 { font-size: 1.1rem; }
.code-box { display: flex; align-items: center; gap: 0.6rem; justify-content: center; }
.code-label { color: var(--text-dim); }
.code-value { font-size: 1.8rem; font-weight: 900; letter-spacing: 0.3em; color: var(--accent); }

/* --- Match-HUD --- */
.match-hud {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.7rem; background: var(--panel); position: sticky; top: 0; z-index: 8;
}
.match-timer { display: flex; flex-direction: column; min-width: 3.4rem; }
#match-clock { font-weight: 800; font-size: 1rem; }
.timer-bar { height: 4px; border-radius: 2px; background: #3a3450; overflow: hidden; }
#timer-fill { height: 100%; width: 100%; background: var(--accent); transition: width 0.25s linear; }
#timer-fill.low { background: var(--danger); }
.match-scores { flex: 1; display: flex; gap: 0.35rem; overflow-x: auto; }
.score-chip {
  white-space: nowrap; padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,0.1); font-size: 0.82rem; font-weight: 700;
}
.score-chip.me { background: var(--accent); color: #241c00; }
.score-chip.out { opacity: 0.45; text-decoration: line-through; }
.countdown-num.reveal-text { font-size: 2.2rem; text-align: center; padding: 0 1rem; }

/* --- Vollbild-Overlays (Countdown, Ergebnis) --- */
.overlay-full {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(8, 6, 12, 0.85); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.countdown-num {
  font-size: 8rem; font-weight: 900; color: var(--accent);
  animation: cd-pop 1s ease-out infinite;
}
@keyframes cd-pop { 0% { transform: scale(0.5); opacity: 0.3; } 40% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0.85; } }
.results-card {
  width: min(440px, 100%); background: var(--panel-solid);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
  padding: 1.3rem; display: flex; flex-direction: column; gap: 0.8rem;
}
.results-list { display: flex; flex-direction: column; gap: 0.4rem; }
.results-reward { text-align: center; font-weight: 800; font-size: 1.1rem; color: var(--accent); min-height: 1.2em; }
.results-actions { display: flex; gap: 0.6rem; }
.results-actions button { flex: 1; }

.checklist-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 55vh; overflow-y: auto; }
.check-row { display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--text-dim); }
.check-row.done { color: var(--text); font-weight: 600; }

/* --- Trophäen / Wochen-Challenge --- */
.weekly-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--panel-solid)), var(--panel-solid));
  border: 1px solid rgba(255,209,102,0.3);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.weekly-head { display: flex; align-items: center; gap: 0.7rem; }
.weekly-emoji { font-size: 1.8rem; }
.weekly-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.weekly-text { font-weight: 800; font-size: 1.05rem; }
.weekly-bar { height: 8px; border-radius: 999px; background: #3a3450; overflow: hidden; }
#weekly-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.weekly-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.trophy-row { display: flex; align-items: center; gap: 0.7rem; }
.trophy-row.locked { opacity: 0.55; }
.trophy-emoji { font-size: 1.5rem; width: 1.9rem; text-align: center; }
.medals { display: flex; gap: 0.15rem; }
.medal { font-size: 1.1rem; filter: grayscale(1) opacity(0.35); }
.medal.on { filter: none; }

/* --- Trophäen-Toast (im Spiel) --- */
.trophy-toasts {
  position: fixed; top: 3.4rem; left: 50%; transform: translateX(-50%);
  z-index: 96; display: flex; flex-direction: column; gap: 0.4rem; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.trophy-toast {
  background: var(--panel-solid); border: 1px solid rgba(255,209,102,0.5);
  color: var(--accent); font-weight: 800; padding: 0.5rem 1rem; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(-12px); transition: opacity 0.4s, transform 0.4s;
}
.trophy-toast.show { opacity: 1; transform: translateY(0); }

/* --- Runde 10: Bestätigungsdialog, Statistik, Tastatur, Neustart --- */

/* Punktestand ist antippbar (Statistik) */
.stat-btn {
  background: none;
  border: none;
  padding: 0.1rem 0.3rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
}
.stat-btn:hover { background: rgba(255,255,255,0.09); }

/* Zeilenlisten in Bestätigung und Statistik */
.confirm-rows, .stats-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
}
.confirm-row, .stats-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.92rem;
}
.confirm-row span, .stats-row span { color: var(--text-dim); }
.confirm-row strong, .stats-row strong { text-align: right; }

/* Wochen-Wort-Set auf dem Marktplatz. */
.wordset-card { display: flex; flex-direction: column; gap: 0.6rem; }
.wordset-head { display: flex; align-items: center; justify-content: space-between; }
.wordset-head h2 { font-size: 1rem; }
.wordset-count { font-weight: 800; color: var(--text-dim); }
.wordset-words { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wordset-word {
  width: auto; margin: 0; padding: 0.3rem 0.7rem;
  border-radius: 999px; font-weight: 800; letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.wordset-word.owned {
  background: rgba(120, 200, 140, 0.22);
  color: #cdeccf; border-color: rgba(120, 200, 140, 0.5);
  cursor: default;
}
.wordset-word.missing {
  background: rgba(255,255,255,0.06);
  color: var(--text); border-color: rgba(255,255,255,0.25);
}

/* Strukturelle Grundstock-Sets (sets.html) */
.set-card { margin-bottom: 0.9rem; }
.set-card.complete { border-color: rgba(120, 200, 140, 0.6); }
.set-head { display: flex; align-items: center; gap: 0.6rem; }
.set-toggle {
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none; padding: 0; margin: 0;
  color: var(--text); cursor: pointer; text-align: left; font: inherit;
}
.set-name { font-weight: 800; font-size: 1.05rem; }
.set-count { color: var(--muted); font-weight: 700; }
.set-bar {
  height: 8px; border-radius: 999px; background: #3a3450;
  overflow: hidden; margin: 0.55rem 0;
}
.set-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.set-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.set-slot {
  padding: 0.25rem 0.6rem; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem; border: 1px solid transparent;
}
.set-slot.owned {
  background: rgba(120, 200, 140, 0.22);
  color: #cdeccf; border-color: rgba(120, 200, 140, 0.5);
}
.set-slot.missing {
  background: rgba(255,255,255,0.06);
  color: var(--muted); border-color: rgba(255,255,255,0.2);
}
.set-foot { display: flex; justify-content: flex-end; min-height: 1.6rem; }

/* Wortliste des Laufs: eigene Bildlaufzone, damit das Panel bei 60 Wörtern
   nicht über den Bildschirm hinauswächst. */
.stats-words {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 32vh;
  overflow-y: auto;
  margin-top: 0.4rem;
}
.stats-words:empty { display: none; }
.stats-word {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.15rem 0.2rem;
}
.stats-word .n { color: var(--text-dim); min-width: 1.6rem; text-align: right; }
.stats-word .w { font-weight: 700; letter-spacing: 0.04em; flex: 1; }
.stats-word .p { font-weight: 800; }
.stats-word .badge { font-size: 0.7rem; padding: 0.05rem 0.4rem; }

/* Admin-Werkzeugkasten: Knopfreihen, die auf dem Handy umbrechen. */
.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin: 0.4rem 0 0.2rem;
}
.tool-row button { flex: 0 0 auto; width: auto; margin: 0; }
.tool-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.tool-row input[type="number"], .tool-row select { width: 8rem; margin: 0; }
.tool-row label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; }
/* Sprach-Haken an einer Wortanfrage. */
.lang-row { display: flex; gap: 0.8rem; margin-top: 0.35rem; }
.lang-check { display: flex; align-items: center; gap: 0.25rem; font-size: 0.82rem; color: var(--text-dim); }
.lang-check input { width: auto; margin: 0; }
#word-add-input { width: 12rem; }

.tool-state {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.6rem;
}
#pane-tools .meta { margin: 0.1rem 0 0.6rem; }
#pane-tools code {
  background: rgba(255,255,255,0.1);
  padding: 0 0.25rem;
  border-radius: 4px;
}

.stats-head {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-top: 0.2rem;
}
.confirm-actions { display: flex; gap: 0.6rem; }
.confirm-actions button { flex: 1; }
button.danger { background: #d9534f; color: #fff; }

/* Joker-Popup: aktive (per Tastatur markierte) Option + Filteranzeige */
.joker-grid button.marked {
  outline: 3px solid #7bd88f;
  outline-offset: -3px;
  background: rgba(123, 216, 143, 0.22);
}
.joker-typed {
  font-size: 0.85rem;
  color: #7bd88f;
  letter-spacing: 0.08em;
}

/* Neustart-Knopf im Zeitrennen mit Restzähler */
#restart-btn { position: relative; }
.restart-left {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.05rem;
  padding: 0 0.18rem;
  border-radius: 999px;
  background: var(--accent, #ffd166);
  color: #1c1524;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05rem;
}


/* --- Runde 11: geplante Joker-Buchstaben in der Wortleiste --- */
.wletter.joker-planned {
  color: #7bd88f;
  text-decoration: underline dotted;
  text-underline-offset: 0.18em;
}

/* --- Runde 11c: Rückgängig-Chip in der Kopfzeile --------------------------
   Er liegt IN der Topbar, nicht im Fluss darüber dem Brett – so ändert sich
   die Höhe über dem Spielfeld nie und die Chips bleiben, wo sie sind.
   Beim Erscheinen fährt er von rechts ein; Punktestand und Rang rücken durch
   das Flex-Layout von selbst weich zur Seite. */
.topbar > * { transition: margin 180ms ease, opacity 180ms ease; }

.undo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.92);
  color: #1c1524;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  /* Bewusst NUR ein Aufblenden, kein transform: Friert die Animation ein –
     und in diesem Projekt tut sie das nachweislich, wenn der Tab nicht im
     Vordergrund ist –, bliebe ein verschobener Chip an seiner Startposition
     kleben und ragte auf schmalen Geräten über den Rand hinaus. Ein halb
     transparenter Chip an der richtigen Stelle ist dagegen unschädlich. */
  animation: undo-in 180ms ease-out;
}
.undo-chip[hidden] { display: none; }
@keyframes undo-in {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* Sehr schmale Geräte: Der Punktestand kürzt sich auf die reine Zahl,
   damit der Chip ohne Umbruch danebenpasst. */
@media (max-width: 400px) {
  .topbar:has(.undo-chip:not([hidden])) .score-label,
  .topbar:has(.undo-chip:not([hidden])) .score-colon { display: none; }
}

/* --- Runde 12: Rang-Seltenheitsliste --- */
.rank-info { width: min(340px, 100%); }
.rank-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.rank-row.here { background: rgba(255,255,255,0.12); font-weight: 700; }
.rank-dot { width: 0.95rem; height: 0.95rem; border-radius: 999px; flex: none; }
.rank-name.grow { flex: 1; }
.rank-meta { color: var(--text-dim); font-size: 0.82rem; }
.rank-tip { cursor: pointer; }
.medal { cursor: pointer; }

/* --- Runde 13: erspielter Rang – Fortschrittsbalken + Tauschpunkte --- */
.rank-wrap { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.15rem; }
.rank-progress {
  display: block;
  width: 100%;
  min-width: 3.2rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}
#rank-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--rank-color);
  transition: width 320ms ease;
}
/* Namenloser Rang: Das Abzeichen bleibt als Farbfleck sichtbar. */
#rank-badge:empty { min-width: 1.6rem; min-height: 0.95rem; }

.swap-points {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(123, 216, 143, 0.22);
  color: #7bd88f;
  white-space: nowrap;
}
.swap-points.empty { background: rgba(255,255,255,0.08); color: var(--text-dim); }

/* --- Runde 13b: Kopien im Wortschatz --- */
.copy-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: var(--text-dim);
  margin-left: 0.3rem;
  white-space: nowrap;
}
/* Klickbarer Doppelte-Zähler (Sammelverkauf dieses Wortes). */
.copy-tag-btn {
  width: auto;
  border: 1px solid rgba(120,200,140,0.4);
  cursor: pointer;
}
.copy-tag-btn:hover { background: rgba(120,200,140,0.25); }
/* Überzählige Fassungen: sichtbar, aber erkennbar zweitrangig. */
.list-item.spare-copy { opacity: 0.72; }