/* ==================================================================
   deck.css — Kartenstapel, Diagramme, Zyklusring
   ================================================================== */

/* ---------- Stapel ---------- */

.deck {
  position: relative;
  margin: 0 0 1.3rem;
  outline: none;
  perspective: 1200px;
}

.deck-card {
  will-change: transform;
}

/* Die oberste Karte liegt im Fluss und bestimmt damit die Höhe des
   Stapels. Die angedeuteten Karten dahinter sind absolut positioniert. */
.deck-behind {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.deck-behind[data-depth="1"] { transform: translateY(12px) scale(0.955); opacity: 0.5; filter: saturate(0.7); }
.deck-behind[data-depth="2"] { transform: translateY(23px) scale(0.912); opacity: 0.24; filter: saturate(0.5); }

.deck-top {
  position: relative;
  z-index: 3;
  transform: translateX(var(--dx, 0)) rotate(var(--rot, 0deg));
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
  touch-action: pan-y;
  cursor: grab;
}
.deck-top.dragging { transition: none; cursor: grabbing; }

.deck-top.fly-left  { transform: translateX(-130%) rotate(-16deg); opacity: 0; }
.deck-top.fly-right { transform: translateX(130%) rotate(16deg); opacity: 0; }
.deck-top.enter-left  { transform: translateX(-40%) rotate(-6deg); opacity: 0; transition: none; }
.deck-top.enter-right { transform: translateX(40%) rotate(6deg); opacity: 0; transition: none; }

@keyframes nudge-l { 0%,100% { transform: translateX(0); } 40% { transform: translateX(-14px) rotate(-1.5deg); } }
@keyframes nudge-r { 0%,100% { transform: translateX(0); } 40% { transform: translateX(14px) rotate(1.5deg); } }
.deck-top.nudge-left  { animation: nudge-l 0.3s ease; }
.deck-top.nudge-right { animation: nudge-r 0.3s ease; }

/* ---------- Karte ---------- */

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(175deg, var(--surface-2) 0%, var(--surface) 60%, var(--bg-deep) 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Nur eine Haarlinie. Ein phasenfarbener Schein über der ganzen Karte
     hatte das SVG-Motiv überstrahlt — der Schein sitzt jetzt gezielt unter
     dem Textteil statt über dem Bild. */
  box-shadow: inset 0 0 0 1px rgba(232, 181, 106, 0.1);
}

.card.phase-menstruation { --phase-glow: rgba(213, 81, 129, 0.3); --phase-c: var(--phase-menstruation); }
.card.phase-follicular   { --phase-glow: rgba(57, 135, 229, 0.3);  --phase-c: var(--phase-follicular); }
.card.phase-ovulation    { --phase-glow: rgba(201, 133, 0, 0.32);  --phase-c: var(--phase-ovulation); }
.card.phase-luteal       { --phase-glow: rgba(144, 133, 233, 0.3); --phase-c: var(--phase-luteal); }
.card.phase-unknown      { --phase-glow: rgba(124, 134, 152, 0.22); --phase-c: var(--phase-unknown); }

.card-art {
  position: relative;
  height: clamp(190px, 36vh, 320px);
  overflow: hidden;
}
.card-art-svg { display: block; width: 100%; height: 100%; }

.card-art-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 2.4rem 1.15rem 0.85rem;
  background: linear-gradient(to top, var(--surface-2) 12%, rgba(22, 19, 29, 0.6) 55%, transparent);
}

.card-phase {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--phase-c, var(--gold));
}

.card-flag {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.card-body {
  position: relative;
  padding: 0.3rem 1.15rem 1.3rem;
  background: linear-gradient(to bottom, var(--phase-glow, transparent) -30%, transparent 42%);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}

.card-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  line-height: 1.12;
  margin-bottom: 0.6rem;
}

.card-copy { font-size: 0.95rem; color: var(--ink-dim); margin-bottom: 1rem; }

.card-move {
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--phase-c, var(--gold));
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
}
.card-move-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phase-c, var(--gold));
  margin-bottom: 0.25rem;
}
.card-move p { font-size: 0.92rem; }

.card-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}
.card-note.flagged { color: var(--warn); }

.card-ghost .card-body { padding-bottom: 0.9rem; }

/* ---------- Wischhinweise ---------- */

.swipe-hint {
  position: absolute;
  top: calc(clamp(190px, 36vh, 320px) * 0.42);
  z-index: 4;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(12, 10, 17, 0.78);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.hint-next { right: 1rem; }
.hint-prev { left: 1rem; }

.deck-top[data-dir="next"] .hint-next,
.deck-top[data-dir="prev"] .hint-prev { opacity: var(--hint, 0); }

/* ---------- Konfidenz ---------- */

.confidence {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line-soft);
  margin-bottom: 0.85rem;
}
.conf-dots { display: inline-flex; gap: 3px; }
.conf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--c, var(--gold));
  opacity: 0.35;
}
.conf-dot.on { background: var(--c, var(--gold)); opacity: 1; }
.conf-text { font-size: 0.78rem; color: var(--ink-dim); }

/* ---------- Wahrscheinlichkeitsbalken ---------- */

.prob-block { margin: 0.5rem 0 0; }

.prob-bar {
  display: flex;
  gap: 2px;                 /* Trennfuge zwischen den Segmenten */
  height: 12px;
  margin-bottom: 0.7rem;
}
.prob-seg {
  width: var(--w);
  background: var(--c);
  border-radius: 3px;
  min-width: 3px;
}

.prob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.79rem;
  color: var(--ink-dim);
}
.prob-legend li { display: flex; align-items: center; gap: 0.4rem; }
.prob-legend b { color: var(--ink); font-weight: 600; }

.swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c);
  flex: none;
}

/* ---------- Hormonleiste auf der Karte ---------- */

.hormone-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
.hs-item { min-width: 0; }
.hs-head {
  display: flex;
  justify-content: flex-start;
  gap: 0.3rem;
  align-items: baseline;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-bottom: 0.25rem;
}
.hs-arrow { color: var(--gold); font-size: 0.8rem; }
.hs-track {
  height: 4px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.hs-fill { height: 100%; width: var(--v); background: var(--gold); border-radius: 2px; }
.hs-label { font-size: 0.64rem; color: var(--ink-faint); margin-top: 0.22rem; }

/* ---------- Hormondiagramm ---------- */

.hormone-chart { position: relative; margin: 0.8rem 0 0; }
.hormone-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }

.panel-title { font-size: 9px; fill: var(--ink); font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.04em; }
.panel-short { fill: rgba(239, 230, 218, 0.5); font-weight: 400; }
.panel-value { font-size: 9px; fill: var(--gold); font-family: var(--font-ui); font-weight: 600; }
.axis-tick   { font-size: 8.5px; fill: rgba(239, 230, 218, 0.45); font-family: var(--font-ui); }

.axis-caption { font-size: 0.72rem; color: var(--ink-faint); margin: 0.5rem 0 0; }

.chart-tip {
  position: absolute;
  top: -0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  white-space: nowrap;
}
.chart-tip strong { font-size: 0.74rem; margin-bottom: 0.15rem; }
.chart-tip b { color: var(--gold); }

/* ---------- Zyklusring ---------- */

.ring-panel { text-align: center; }
.ring-wrap { position: relative; max-width: 300px; margin: 0.4rem auto 1rem; }
.cycle-ring { display: block; width: 100%; height: auto; }
.ring-tick { font-size: 9px; fill: rgba(239, 230, 218, 0.45); font-family: var(--font-ui); }

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  pointer-events: none;
}
.ring-day {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}
.ring-of { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.ring-phase { font-size: 0.86rem; margin-top: 0.3rem; color: var(--ink); }
.ring-conf { font-size: 0.72rem; color: var(--gold); }

.phase-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  color: var(--ink-dim);
}
.phase-legend li { display: flex; align-items: center; gap: 0.4rem; }
.phase-legend .dim { color: var(--ink-faint); font-style: italic; }

@media (min-width: 900px) {
  .card-art { height: 300px; }
  .swipe-hint { top: 126px; }
}

.swatch.bar { height: 4px; border-radius: 2px; width: 16px; }