/* ═══════════════════════════════════════════════════════════
   Geräusche-Memory – Modul-Styles
   Erbt Tokens/Reset/Buttons/Modals aus ../css/style.css.
   Markanter Unterschied zum Live-Modus: TEAL statt Rot, eigener
   Toolbar-Streifen, Karten-Look mit 3D-Flip.
   ═══════════════════════════════════════════════════════════ */

.mem-app {
  --mem-accent:      #00838f;   /* Teal – Memory-Leitfarbe */
  --mem-accent-dark: #00636b;
  --mem-image:       #c85a0a;   /* Bild-Karten (warmes Orange) */
  --mem-bg:          #eef4f4;   /* zarter Teal-Hintergrund */
  background: var(--mem-bg);
}

/* ── Views ───────────────────────────────────────────────── */
.mem-view { display: none; height: 100dvh; flex-direction: column; }
.mem-view.active { display: flex; }

/* ── Toolbar-Variante ────────────────────────────────────── */
.mem-toolbar {
  border-bottom: 3px solid var(--mem-accent);
}
.mem-toolbar .toolbar-title { color: var(--mem-accent); letter-spacing: 2px; }
.mem-toolbar a.btn-icon { text-decoration: none; }

/* ═══════════════ WERKSTATT ═══════════════ */
.mem-build-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.mem-variant-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.mem-variant-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mem-variant-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--font); font-size: 14px; font-weight: bold;
  border: var(--border-lg);
  background: var(--c-bg); color: var(--c-fg);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.mem-variant-btn .mem-variant-sub { font-size: 11px; font-weight: normal; color: var(--c-muted); }
.mem-variant-btn:hover { background: var(--c-fg); color: var(--c-bg); }
.mem-variant-btn:hover .mem-variant-sub { color: var(--c-bg); }
.mem-variant-btn.active { background: var(--mem-accent); color: #fff; border-color: var(--mem-accent-dark); }
.mem-variant-btn.active .mem-variant-sub { color: rgba(255,255,255,0.85); }

.mem-count-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.mem-count-label { font-weight: bold; font-size: 15px; }
.mem-count-hint  { font-size: 12px; color: var(--c-muted); }
.mem-count-buttons { display: flex; gap: var(--space-2); }
.mem-count-btn {
  width: 42px; height: 42px;
  font-family: var(--font); font-size: 16px; font-weight: bold;
  border: var(--border-lg);
  background: var(--c-bg); color: var(--c-fg);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.mem-count-btn:hover { background: var(--c-fg); color: var(--c-bg); }
.mem-count-btn.active {
  background: var(--mem-accent); color: #fff; border-color: var(--mem-accent-dark);
}

/* Themen-Raster */
.mem-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.mem-theme {
  position: relative;
  border: var(--border-lg);
  background: var(--c-bg);
  padding: var(--space-4);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mem-theme-num {
  position: absolute;
  top: -14px; left: var(--space-3);
  width: 28px; height: 28px;
  background: var(--mem-accent); color: #fff;
  font-weight: bold; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-bg);
}

.mem-slot { border: var(--border); background: var(--c-bg-panel); padding: var(--space-3); }
.mem-slot.filled { border-color: var(--mem-accent); }
.mem-slot--image.filled { border-color: var(--mem-image); }
.mem-slot-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--c-muted); margin-bottom: var(--space-2); }
.mem-slot-body { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.mem-btn-rec, .mem-btn-lib, .mem-btn-photo, .mem-btn-stop { flex: 1; min-width: 120px; }
.mem-btn-rec { border-color: var(--c-rec); color: var(--c-rec); }
.mem-btn-rec:hover { background: var(--c-rec); color: #fff; }
.mem-btn-stop { background: var(--c-rec); color: #fff; border-color: var(--c-rec); }

.mem-rec-live { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: bold; }
.mem-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-rec); animation: mem-blink 1s steps(2) infinite; }
@keyframes mem-blink { 50% { opacity: 0.25; } }

.mem-chip {
  font-family: var(--font); font-size: 13px;
  border: var(--border); background: var(--c-bg); color: var(--c-fg);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  transition: background 80ms, color 80ms;
}
.mem-chip:hover { background: var(--c-fg); color: var(--c-bg); }
.mem-chip--play { flex: 1; text-align: left; }
.mem-chip--redo { min-width: 38px; font-size: 15px; }

.mem-thumb {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  border: var(--border);
}
.mem-thumb-redo {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.6); color: #fff; border-color: rgba(255,255,255,0.4);
}
.mem-thumb-redo:hover { background: #000; }

/* Start-Leiste */
.mem-startbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-lg);
  background: var(--c-bg);
}
.mem-progress { font-size: 13px; color: var(--c-muted); font-weight: bold; }
.mem-btn-start {
  font-size: 16px; padding: var(--space-3) var(--space-6);
  background: var(--mem-accent); color: #fff; border-color: var(--mem-accent-dark);
}
.mem-btn-start:hover:not(:disabled) { background: var(--mem-accent-dark); color: #fff; }
.mem-btn-start:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══════════════ SPIEL ═══════════════ */
.mem-play-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow: hidden;
}

.mem-board-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
.mem-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(6px, 1.4vw, 14px);
  width: min(94vw, 78dvh, 720px);
}

/* Karte */
.mem-card {
  all: unset;
  display: block;
  box-sizing: border-box;
  aspect-ratio: 1;
  cursor: pointer;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
}
.mem-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 350ms cubic-bezier(.4,.2,.2,1);
}
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }

.mem-card-back, .mem-card-front {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-border-strong);
  overflow: hidden;
}

/* Rückseite – Ton- und Bild-Karten unterscheidbar */
.mem-card-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 8px, transparent 8px 16px),
    var(--mem-accent);
  color: #fff;
}
.mem-card--image .mem-card-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 8px, transparent 8px 16px),
    var(--mem-image);
}
.mem-card-hint { font-size: clamp(20px, 6vw, 40px); opacity: 0.92; }
.mem-card:hover .mem-card-back { filter: brightness(1.08); }

/* Vorderseite */
.mem-card-front {
  transform: rotateY(180deg);
  background: var(--c-bg);
  background-size: cover; background-position: center;
}
.mem-card--sound .mem-card-front { background: var(--mem-accent-dark); }

/* Ton-Wellen auf aufgedeckter Ton-Karte */
.mem-card-bars { display: flex; align-items: flex-end; gap: 5px; height: 42%; }
.mem-card-bars span {
  width: 7px; background: #fff; border-radius: 2px;
  animation: mem-bars 0.9s ease-in-out infinite;
}
.mem-card-bars span:nth-child(1) { animation-delay: 0s; }
.mem-card-bars span:nth-child(2) { animation-delay: 0.15s; }
.mem-card-bars span:nth-child(3) { animation-delay: 0.3s; }
.mem-card-bars span:nth-child(4) { animation-delay: 0.45s; }
@keyframes mem-bars { 0%,100% { height: 30%; } 50% { height: 100%; } }

/* Treffer – Karte verschwindet */
.mem-card.matched {
  transition: opacity 400ms, transform 400ms;
  opacity: 0; transform: scale(0.6); pointer-events: none;
}

/* Punktestand */
.mem-score {
  flex: 0 0 clamp(90px, 14vw, 150px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  border: var(--border-lg);
  background: var(--c-bg);
  padding: var(--space-3);
  transition: background 120ms, border-color 120ms;
}
.mem-score.active { border-color: var(--mem-accent); background: #e6f3f4; box-shadow: 0 0 0 3px rgba(0,131,143,0.15); }
.mem-score-name {
  font-weight: bold; font-size: 14px; text-align: center;
  outline: none; border-bottom: 1px dashed transparent; min-width: 60px;
}
.mem-score.active .mem-score-name { border-bottom-color: var(--mem-accent); }
.mem-score-val { font-size: clamp(32px, 8vw, 56px); font-weight: bold; line-height: 1; color: var(--mem-accent); }
.mem-score-turn { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--mem-accent); }

.mem-timer { font-size: 15px; font-weight: bold; color: var(--mem-accent); }

/* Ohne diese Regel würde .mem-score{display:flex} das native hidden-Attribut
   überstimmen – die leeren Punktestände blieben im Zeit-Modus sichtbar. */
.mem-score[hidden], .mem-timer[hidden] { display: none !important; }

/* ═══════════════ Modals / Auswahl ═══════════════ */
.mem-mode-choice { display: flex; flex-direction: column; gap: var(--space-3); }
.mem-lib-list { max-height: 50dvh; overflow-y: auto; }
.mem-lib-row { display: flex; align-items: center; gap: var(--space-2); border-bottom: var(--border); }
.mem-lib-play {
  flex: 0 0 auto; width: 38px; height: 38px;
  font-family: var(--font); font-size: 14px;
  border: var(--border); background: var(--c-bg); color: var(--c-fg); cursor: pointer;
}
.mem-lib-play:hover { background: var(--mem-accent); color: #fff; border-color: var(--mem-accent); }
.mem-lib-name {
  flex: 1; text-align: left; font-family: var(--font); font-size: 14px;
  background: none; border: none; color: var(--c-fg); cursor: pointer;
  padding: var(--space-3) var(--space-2);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
}
.mem-lib-name:hover { background: var(--c-light); }
.mem-lib-cat { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 1px; }
.mem-lib-empty { padding: var(--space-4); color: var(--c-muted); text-align: center; }

.library-cat {
  font-family: var(--font); font-size: 12px;
  border: var(--border); background: var(--c-bg); color: var(--c-fg);
  padding: var(--space-1) var(--space-3); cursor: pointer; white-space: nowrap;
}
.library-cat:hover { background: var(--c-light); }
.library-cat.active { background: var(--mem-accent); color: #fff; border-color: var(--mem-accent); }

/* Ergebnis */
.mem-win-box { text-align: center; }
.mem-win-emoji { font-size: 56px; line-height: 1; margin: var(--space-4) 0 var(--space-2); }
.mem-win-title { font-size: 22px; margin-bottom: var(--space-2); }
.mem-win-detail { font-size: 15px; color: var(--c-muted); margin-bottom: var(--space-4); }
.mem-win-actions { justify-content: center; flex-wrap: wrap; }
.mem-win-actions .btn { text-decoration: none; }

/* ── Toasts ──────────────────────────────────────────────── */
#mem-toasts {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.mem-toast {
  background: var(--c-fg); color: var(--c-bg);
  padding: var(--space-3) var(--space-4); font-size: 13px;
  border: 2px solid var(--mem-accent);
  opacity: 0; transform: translateY(10px); transition: opacity 200ms, transform 200ms;
  max-width: 90vw; text-align: center;
}
.mem-toast.show { opacity: 1; transform: translateY(0); }

/* ── Konfetti ────────────────────────────────────────────── */
.mem-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10000; overflow: hidden; }
.mem-confetti-bit {
  position: absolute; top: -20px; width: 9px; height: 14px;
  animation: mem-fall linear forwards;
}
@keyframes mem-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105dvh) rotate(720deg); opacity: 0.9; }
}

/* ── Kleiner: Modal ohne .open weich einblenden ──────────── */
.modal { transition: opacity 150ms; }

/* Handy hochkant: Punkte über/unter dem Feld statt daneben */
@media (max-width: 560px) {
  .mem-play-body { flex-direction: column; }
  .mem-score { flex: 0 0 auto; flex-direction: row; justify-content: space-around; padding: var(--space-2) var(--space-4); }
  .mem-score-val { font-size: 34px; }
  .mem-score--right { order: 3; }
  .mem-board-wrap { order: 2; }
}

/* ── Deine Dateien (App-Dateiliste) ─────────────────────────────────────────── */
.mem-files-list { display: flex; flex-direction: column; gap: var(--space-2); }
.mem-files-empty {
  text-align: center; color: var(--c-muted); line-height: 1.7;
  padding: var(--space-4) var(--space-2);
}
.mem-file-row {
  display: flex; align-items: stretch; gap: 6px;
  border: 2px solid var(--c-border); border-radius: 10px; overflow: hidden;
}
.mem-file-row:hover { border-color: var(--mem-accent); }
.mem-file-open {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 12px var(--space-3); font-family: var(--font); font-size: 16px; color: inherit;
  min-width: 0;
}
.mem-file-open:hover { background: rgba(0,131,143,0.08); }
.mem-file-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-file-date { flex: 0 0 auto; font-size: 12px; color: var(--c-muted); }
.mem-file-share, .mem-file-del {
  flex: 0 0 auto; align-self: center; margin-right: 4px;
  min-width: 40px; height: 40px; font-size: 18px;
}
.mem-file-del--armed {
  width: auto; padding: 0 10px; font-size: 13px; font-weight: bold;
  background: var(--c-rec, #c0392b); color: #fff; border-color: var(--c-rec, #c0392b);
}

/* Sichern-Dialog */
.mem-saveas-label { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; }
.mem-saveas-input { width: 100%; font-size: 17px; }

/* Primär-Button (Bestätigen) */
.btn--primary {
  background: var(--mem-accent); color: #fff; border-color: var(--mem-accent-dark);
}
.btn--primary:hover { background: var(--mem-accent-dark); color: #fff; }