/* Edahnien CSS — autogeneriert aus edahnien.css */

/* ==========================================================================
   GameTime — Zeitsystem
   Tageszeit · Wetter · Mondphasen · Jahreszeiten
   ========================================================================== */

/* ── GameTime-Strip (unter Topbar) ───────────────────────────────────────── */
.gt-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 5px 20px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--ink-dim, #888);
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.gt-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gt-item-date {
  color: var(--ink, #ccc);
  font-size: 11px;
}
.gt-sep {
  color: rgba(255,255,255,0.18);
  font-size: 10px;
}
.gt-moon-label {
  display: none; /* Mondphasenname nur per Tooltip — Icon genug */
}

/* Tageszeit-Farben */
.gt-morgen { color: #c8a050; }
.gt-mittag { color: #e0c060; }
.gt-abend  { color: #c06030; }
.gt-nacht  { color: #7090c8; }

/* Wetter-Farben */
.gt-w-sonnig   { color: #e0b840; }
.gt-w-heiss    { color: #e07820; }
.gt-w-bewoelkt { color: #8898a8; }
.gt-w-regen    { color: #6090b8; }
.gt-w-sturm    { color: #5070a0; }
.gt-w-nebel    { color: #909898; }
.gt-w-schnee   { color: #a8c8e8; }

/* Mondphase: Vollmond etwas heller */
.gt-item-moon { font-size: 14px; }
body.gt-moon-4 .gt-item-moon { color: #e8e0b0; text-shadow: 0 0 8px rgba(240,230,160,0.6); }

/* ── Nacht: Gesamtatmosphäre ─────────────────────────────────────────────── */
body.gt-nacht {
  background-color: #080c1a; /* dunkler Hint wenn Hintergrund transparent */
}
body.gt-nacht .gt-strip {
  background: rgba(5,8,20,0.65);
  border-bottom-color: rgba(60,80,160,0.15);
}
body.gt-nacht .newday-panel,
body.gt-nacht .content-panel {
  background: rgba(5,8,20,0.55);
}

/* ── Morgen: leicht warme Tönung ─────────────────────────────────────────── */
body.gt-morgen .newday-panel,
body.gt-morgen .content-panel {
  background: rgba(20,12,4,0.55);
}

/* ── Mittag: leicht hellere Atmosphäre ───────────────────────────────────── */
body.gt-mittag {
  background-color: #0e1018; /* etwas heller als Nacht */
}
body.gt-mittag .newday-panel,
body.gt-mittag .content-panel {
  background: rgba(14,12,8,0.52);
}

/* ── Abend: warme Orangetöne ─────────────────────────────────────────────── */
body.gt-abend {
  background-color: #0f0b08;
}
body.gt-abend .newday-panel,
body.gt-abend .content-panel {
  background: rgba(22,12,5,0.52);
}

/* ── Wetter: Animationen ─────────────────────────────────────────────────── */

/* Regen — vertikale Striche im Hintergrund */
@keyframes gt-rain {
  0%   { background-position: 0 -100px; }
  100% { background-position: -20px 100vh; }
}
body.gt-regen .info-page::after,
body.gt-sturm .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    175deg,
    transparent,
    transparent 3px,
    rgba(120,160,220,0.06) 3px,
    rgba(120,160,220,0.06) 4px
  );
  background-size: 8px 120px;
  animation: gt-rain 0.8s linear infinite;
}
body.gt-sturm .info-page::after {
  background-image: repeating-linear-gradient(
    170deg,
    transparent,
    transparent 2px,
    rgba(100,130,210,0.09) 2px,
    rgba(100,130,210,0.09) 3px
  );
  background-size: 6px 90px;
  animation: gt-rain 0.4s linear infinite;
}

/* Schnee — unruhig fallende Flocken, 5 Ebenen, Zickzack-Drift */
@keyframes gt-snow {
  0%   { background-position:   0px  -60px,  33px -120px,  67px  -30px,  12px  -90px,  55px  -15px; }
  20%  { background-position:  18px   18vh,   8px   14vh,  85px   20vh,  -6px   16vh,  72px   22vh; }
  40%  { background-position:  -4px   38vh,  50px   34vh,  52px   40vh,  22px   36vh,  38px   42vh; }
  60%  { background-position:  22px   57vh,  24px   54vh,  74px   59vh,   2px   55vh,  62px   61vh; }
  80%  { background-position:   6px   78vh,  44px   75vh,  58px   80vh,  16px   76vh,  48px   82vh; }
  100% { background-position:  14px  110vh,  58px  110vh,  42px  110vh,  30px  110vh,  78px  110vh; }
}
body.gt-schnee .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(220,235,255,0.60) 2px,   transparent 2px),
    radial-gradient(circle, rgba(220,235,255,0.40) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(220,235,255,0.50) 1px,   transparent 1px),
    radial-gradient(circle, rgba(220,235,255,0.35) 2px,   transparent 2px),
    radial-gradient(circle, rgba(220,235,255,0.45) 1px,   transparent 1px);
  background-size: 130px 130px, 90px 90px, 70px 70px, 160px 160px, 55px 55px;
  animation: gt-snow 10s linear infinite;
}

/* Nebel — leichtes Pulsieren */
@keyframes gt-fog {
  0%, 100% { opacity: 0.18; }
  50%       { opacity: 0.30; }
}
body.gt-nebel .info-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(180,185,190,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 40%, rgba(180,185,190,0.20) 0%, transparent 55%);
  animation: gt-fog 4s ease-in-out infinite;
}

/* ── Responsive: Datum kürzen auf kleinen Screens ────────────────────────── */
@media (max-width: 800px) {
  .gt-item-date { display: none; }
  .gt-sep:nth-child(4),
  .gt-sep:nth-child(5) { display: none; }
}