/* "Heute" als illustrierter Tagesweg (Issue #192, Teil B). Gleiche
   Wald-/Pergament-Tokens wie lernwegeCards.css, lokal auf .heute-view
   beschraenkt -- dieselbe Weltgrafik wird wiederverwendet (kein neues Art
   Asset), nur die Vordergrund-Ebene unterscheidet sich (Stationenweg statt
   Kartenraster). */
.heute-view {
  --wald: #13261A;
  --pergament: #F4ECDA;
  --ink: #1A2117;
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--wald);
}

.heute-world-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.heute-path-screen,
.heute-content-screen,
.heute-wesen-screen,
.heute-assessment-screen {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);
  background: linear-gradient(180deg, rgba(19, 38, 26, 0.55) 0%, rgba(19, 38, 26, 0.72) 100%);
}

.heute-path-screen[hidden],
.heute-content-screen[hidden],
.heute-wesen-screen[hidden],
.heute-assessment-screen[hidden] {
  display: none;
}

.heute-path-title,
.heute-assessment-title {
  margin: 0 0 16px;
  color: var(--pergament);
  font-family: "New York", "Iowan Old Style", Georgia, serif;
  font-size: 26px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.heute-note {
  color: var(--pergament);
  font-size: 17px;
}

/* Raeumlicher Wegabschnitt (Issue #192, Korrekturrunde): Stationen sind
   Pins, entlang des im Hintergrundbild bereits sichtbaren Pfades platziert
   (siehe PATH_WAYPOINTS in heuteView.js), keine Kartenliste mehr. */
.heute-path-stage {
  position: relative;
  min-height: calc(100% - 40px);
}

.heute-path-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heute-path-line polyline {
  fill: none;
  stroke: rgba(244, 236, 218, 0.55);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.heute-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 130px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--pergament);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Echte Stationsmarker-Bilder (Issue #192, "Mit den vorhandenen Arbeiten")
   statt der vorherigen reinen CSS-Kreise -- Glow/Haekchen sind bereits Teil
   der gelieferten PNGs (siehe web/assets/wesen/README.md), CSS steuert nur
   noch Groesse je Pin-Zustand. */
.heute-pin-dot {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.heute-pin-upcoming {
  opacity: 0.55;
}

.heute-pin-upcoming .heute-pin-dot {
  width: 30px;
  height: 30px;
}

.heute-pin-current {
  opacity: 1;
}

.heute-pin-current .heute-pin-dot {
  width: 54px;
  height: 54px;
  animation: heute-pin-current-pulse 2.4s ease-in-out infinite;
}

.heute-pin-done {
  opacity: 0.7;
}

.heute-pin-justdone .heute-pin-dot {
  animation: heute-pin-justdone-pulse 1.4s ease-out;
}

@keyframes heute-pin-current-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(230, 168, 45, 0.55)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(230, 168, 45, 0.85)); }
}

@keyframes heute-pin-justdone-pulse {
  0% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .heute-pin-current .heute-pin-dot,
  .heute-pin-justdone .heute-pin-dot {
    animation: none;
  }
}

/* Wesen-Ecke: bewusst zurueckhaltend, keine vollwertige fuenfte
   Navigationsflaeche (Issue-Produktentscheidung 2026-09-06, Punkt 3/5). */
.heute-wesen-corner {
  position: absolute;
  top: calc(var(--safe-top) + 16px);
  right: calc(var(--safe-right) + 16px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(244, 236, 218, 0.85);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
}

/* Echtes Lumi-Portraet statt Stern-Platzhalter, sobald ein Wesen gewaehlt
   ist (siehe setCornerExpression() in heuteView.js). */
.heute-wesen-corner-image {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.heute-wesen-bubble {
  position: absolute;
  top: calc(var(--safe-top) + 70px);
  right: calc(var(--safe-right) + 16px);
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(244, 236, 218, 0.95);
  color: var(--ink);
  font-size: 14px;
  z-index: 2;
}

.heute-wesen-bubble[hidden] {
  display: none;
}

/* Stiller Puls an der Wesen-Ecke bei JEDEM gemeldeten Lernereignis --
   Groesse nach Ereignisgewicht (siehe pulseSizeForWeight() in heuteView.js).
   Laeuft auch waehrend einer aktiven Aufgabe (Fokus vor Animation heisst
   hier: kein Text, keine grosse Bewegung -- aber etwas Sichtbares). */
.heute-wesen-pulse-small,
.heute-wesen-pulse-medium,
.heute-wesen-pulse-large {
  animation-name: heute-wesen-pulse;
  animation-timing-function: ease-out;
  animation-fill-mode: none;
}

.heute-wesen-pulse-small { animation-duration: 0.6s; }
.heute-wesen-pulse-medium { animation-duration: 0.8s; }
.heute-wesen-pulse-large { animation-duration: 0.9s; }

@keyframes heute-wesen-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 168, 45, 0.7); }
  60% { box-shadow: 0 0 0 16px rgba(230, 168, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 168, 45, 0); }
}

.heute-wesen-pulse-medium { transform: scale(1.08); }
.heute-wesen-pulse-large { transform: scale(1.18); }

@media (prefers-reduced-motion: reduce) {
  .heute-wesen-pulse-small,
  .heute-wesen-pulse-medium,
  .heute-wesen-pulse-large {
    animation: none;
    transform: none;
  }
}

.heute-content-bar {
  margin-bottom: 12px;
}

.heute-done-button {
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 4px 12px 12px 4px;
  background: var(--pergament);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.heute-assessment-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.heute-assessment-button {
  min-height: 52px;
  padding: 12px 20px;
  border: none;
  border-radius: 4px 14px 14px 4px;
  background: var(--pergament);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}