/* ═══════════════════════════════════════════════════════════════════════════
   Midnight Questions — die Spielkarten. Eigene Datei, weil sie an drei
   Stellen gebraucht werden: in der App (spiel.html), auf der Produktseite
   (index.html) und in den Spielregeln. Das Markup dazu baut karten.js.
   ⚠️ Die Farbwerte stehen hier noch einmal, damit die Datei auch OHNE app.css
      trägt (die Produktseite lädt app.css nicht). Gleiche Werte wie dort.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:     #F4EEE6;
  --paper-2:   #E9E1D6;
  --paper-ink: #2A2224;
  --night:     #16101A;
  --mq-rose:   #E8B4A0;
  --mq-rose-2: #F5D5C8;
  --mq-line:   rgba(232, 180, 160, .24);
}

/* ═══════════════════════════════════════════════════════════════ Karte
   Alle Maße in cqw (Prozent der Kartenbreite) — die Karte skaliert als
   Ganzes, egal wie breit sie gerade gezeichnet wird. Flutter: LayoutBuilder,
   jede Größe = Breite × Anteil.
   ⚠️ .mc ist nur der Rahmen (Größe + Container), alles Sichtbare liegt in
      .mc-in. cqw auf dem Container-Element SELBST bezieht sich nicht auf
      die Karte, sondern auf den nächsten Vorfahren — bei einer kleinen
      Karte also auf den Bildschirm: die Ecken wurden so rund, dass die
      Karte oval aussah (gemessen 01.10.2026 bei 62 px Breite). */

.mc {
  container-type: inline-size;
  position: relative; width: var(--w, 260px); aspect-ratio: 5 / 7; flex: none;
}
.mc-in {
  position: absolute; inset: 0; border-radius: 6.5cqw; overflow: hidden;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 1.5cqw 6cqw rgba(0, 0, 0, .45), 0 0 0 .5cqw rgba(0, 0, 0, .18);
}
.mc-frame { position: absolute; inset: 4.5cqw; border: .7cqw solid var(--c); border-radius: 3.5cqw; opacity: .9; }
.mc-idx { position: absolute; display: flex; flex-direction: column; align-items: center; width: 14cqw; }
.mc-idx b { font-size: 9.5cqw; line-height: 1; font-weight: 900; color: var(--c); letter-spacing: -.3cqw; }
.mc-idx svg { width: 6cqw; height: 6cqw; margin-top: 1.4cqw; }
.mc-tl { left: 6.6cqw; top: 7.4cqw; }
.mc-br { right: 6.6cqw; bottom: 7.4cqw; transform: rotate(180deg); }
.mc-panel {
  position: absolute; left: 21cqw; right: 21cqw; top: 13cqw; bottom: 13cqw;
  border-radius: 2.6cqw; border: .5cqw solid var(--c);
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)),
              var(--paper-2);
}
.mc-emb { position: absolute; left: 7%; right: 7%; top: 7%; height: 38%; display: flex; align-items: flex-start; justify-content: center; }
.mc-emb svg { width: 100%; height: 100%; }
.mc-emb-down { top: auto; bottom: 7%; transform: rotate(180deg); }
.mc-topic {
  position: absolute; left: -4cqw; right: -4cqw; top: 50%; transform: translateY(-50%);
  display: flex; justify-content: center;
}
.mc-topic span {
  max-width: 100%; background: var(--c); color: var(--paper);
  font-size: 4.6cqw; font-weight: 900; letter-spacing: .5cqw; text-transform: uppercase;
  padding: 1.6cqw 3.4cqw; border-radius: 99cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 0 1.1cqw var(--paper-2);
}
.mc-ret { position: absolute; right: 7cqw; top: 6cqw; font-size: 6cqw; font-weight: 900; color: var(--c); opacity: .8; }

/* Mitternacht (XII) — dunkle Karte */
.mc-risk .mc-in { background: var(--night); color: var(--mq-rose-2); }
.mc-risk .mc-panel { background: radial-gradient(80% 60% at 50% 50%, rgba(232, 180, 160, .14), rgba(232, 180, 160, 0)), var(--night); }
.mc-risk .mc-topic span { color: var(--night); box-shadow: 0 0 0 1.1cqw var(--night); }

/* Frageseite */
.mc-q .mc-in { display: flex; flex-direction: column; }
.mc-qhead {
  display: flex; align-items: center; justify-content: space-between; gap: 3cqw;
  margin: 4.5cqw 4.5cqw 0; padding: 3.4cqw 4.6cqw; border-radius: 3.5cqw;
  background: var(--c); color: var(--paper);
}
.mc-qhead span { font-size: 4.6cqw; font-weight: 900; letter-spacing: .5cqw; text-transform: uppercase;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-qhead b { font-size: 6cqw; font-weight: 900; }
.mc-risk .mc-qhead { color: var(--night); }
.mc-qtext {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4cqw 9cqw; font-weight: 700; line-height: 1.3; color: var(--paper-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mc-risk .mc-qtext { color: var(--mq-rose-2); }
.mc-qtext-l  { font-size: 8.6cqw; }
.mc-qtext-m  { font-size: 7.2cqw; }
.mc-qtext-s  { font-size: 6.2cqw; }
.mc-qtext-xs { font-size: 5.3cqw; }
.mc-qfoot { text-align: center; padding: 0 0 5.5cqw; font-size: 4.2cqw; font-weight: 700; letter-spacing: .4cqw;
            text-transform: uppercase; color: var(--c); }

/* Rückseite */
.mc-back .mc-in { background: var(--night); }
.mc-back svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Klein (Schreibliste, Verlauf) */
.mc-small .mc-in { box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35), 0 0 0 .6cqw rgba(0, 0, 0, .2); }

/* Stapel */
.mc-deck { position: relative; width: var(--w, 92px); aspect-ratio: 5 / 7; flex: none; }
.mc-deck-layer { position: absolute; inset: 0; transform: translate(calc(var(--i) * 3px), calc(var(--i) * -3px)); }
.mc-deck-layer .mc { --w: 100%; width: 100%; }
.mc-deck-empty { border: 1.5px dashed var(--mq-line); border-radius: 10px; }
.mc-deck-n { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: 12px; color: var(--mq-text-2, #A99D98); }
.mc-deck-n b { color: var(--mq-text, #F6F1EE); font-weight: 900; margin-right: 4px; }

/* Umdrehen (Flutter: AnimatedBuilder + Matrix4.rotationY) */
.flip { perspective: 1400px; }
.flip-in { animation: mq-flip .55s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes mq-flip {
  0%   { transform: rotateY(90deg) scale(.96); }
  100% { transform: rotateY(0) scale(1); }
}
.deal-in { animation: mq-deal .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mq-deal {
  0%   { transform: translate(-40%, -18%) rotate(-10deg) scale(.6); opacity: 0; }
  100% { transform: none; opacity: 1; }
}