dok/public/css/daily.css

/* ============================================================
   public/css/daily.css  –  Daily World Map (SVG-Overlay Ansatz)
============================================================ */

@keyframes dailyFadeIn   { from{opacity:0} to{opacity:1} }
@keyframes dailyScaleIn  { from{opacity:0;transform:translate(-50%,-50%) scale(.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }

/* ── Overlay ─────────────────────────────────────────────── */
#daily-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dailyFadeIn .3s ease;
}

/* ── Map Container ───────────────────────────────────────── */
#daily-map-wrap {
  position: relative;
  max-width: min(96vw, 1020px);
  border-radius: 16px;
  overflow: hidden;
  animation: dailyScaleIn .3s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 0 0 1px rgba(80,140,255,.4),
    0 0 0 3px rgba(80,140,255,.1),
    0 30px 80px rgba(0,0,0,.9);
}

#daily-map-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* ── SVG Overlay (liegt auf dem Bild) ────────────────────── */
#daily-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Stationen (SVG-Gruppen) ─────────────────────────────── */
.ds-hit {
  cursor: pointer;
  fill: transparent;
}
.ds-locked .ds-hit { cursor: default; }

/* Pfadlinie */
.ds-path-line {
  fill: none;
  stroke: rgba(80,160,255,.25);
  stroke-width: .7;
  stroke-dasharray: 3 2.5;
}
.ds-path-line.done {
  stroke: rgba(100,220,120,.4);
}

/* Locked: dunkle Abdunklung über dem Bildkreis */
.ds-locked .ds-overlay {
  fill: rgba(0,0,5,.62);
  stroke: rgba(50,60,100,.45);
  stroke-width: .8;
}
.ds-locked .ds-num {
  fill: rgba(120,130,160,.38);
  font-family: "Cinzel", serif;
  font-weight: 700;
}

/* Available: transparente Mitte, leuchtender Rand */
.ds-available .ds-overlay {
  fill: rgba(40,100,255,.08);
  stroke: rgba(100,200,255,.9);
  stroke-width: 1.2;
}
.ds-available .ds-num {
  fill: #fff;
  font-family: "Cinzel", serif;
  font-weight: 700;
  filter: drop-shadow(0 0 3px rgba(180,220,255,.9));
}
/* Pulsierender Außenring */
.ds-available .ds-ring1 {
  fill: none;
  stroke: rgba(80,180,255,.65);
  stroke-width: .9;
}
.ds-available .ds-ring2 {
  fill: none;
  stroke: rgba(80,180,255,.3);
  stroke-width: .6;
}
/* Hover */
.ds-available:hover .ds-overlay {
  fill: rgba(60,130,255,.18);
  stroke: rgba(150,220,255,1);
  stroke-width: 1.5;
}
.ds-available:hover .ds-num {
  filter: drop-shadow(0 0 6px rgba(200,240,255,1));
}

/* Done: grüne Einfärbung */
.ds-done .ds-overlay {
  fill: rgba(30,160,70,.35);
  stroke: rgba(80,220,110,.85);
  stroke-width: 1.2;
}
.ds-done .ds-check {
  fill: #fff;
  font-family: sans-serif;
  font-weight: 700;
  filter: drop-shadow(0 0 2px rgba(50,200,80,.8));
}

/* ── Titel ───────────────────────────────────────────────── */
#daily-map-title {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(5,8,20,.9), rgba(8,12,28,.92));
  border: 1px solid rgba(80,140,255,.45);
  border-radius: 20px;
  padding: 7px 26px;
  font-family: "Cinzel", serif;
  font-size: 13px;
  color: #a0c8ff;
  letter-spacing: 4px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}

/* ── Schließen ───────────────────────────────────────────── */
#daily-map-close {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  cursor: pointer;
  z-index: 20;
  transition: .2s;
}
#daily-map-close:hover { background: rgba(180,40,40,.8); color:#fff; }

/* ── Progress Bar ────────────────────────────────────────── */
#daily-progress-bar-wrap {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  background: rgba(5,8,20,.82);
  border: 1px solid rgba(80,140,255,.3);
  border-radius: 10px;
  padding: 8px 18px 9px;
  z-index: 10; pointer-events: none;
}
#daily-progress-text {
  font-family: "Cinzel", serif;
  font-size: 11px; color: rgba(160,200,255,.8);
  letter-spacing: 1px; text-align: center; margin-bottom: 6px;
}
#daily-progress-track {
  height: 5px; background: rgba(80,140,255,.12); border-radius: 3px; overflow: hidden;
}
#daily-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2060dd, #60b0ff);
  border-radius: 3px; transition: width .7s ease;
  box-shadow: 0 0 8px rgba(80,160,255,.6);
}

/* ── All Done ────────────────────────────────────────────── */
#daily-all-done {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,5,15,.8); border-radius: 16px;
  z-index: 20; backdrop-filter: blur(4px);
  animation: dailyFadeIn .4s ease;
}
#daily-all-done .done-icon  { font-size:56px; margin-bottom:16px; }
#daily-all-done .done-title { font-family:"Cinzel",serif; font-size:22px; color:#7af09a; letter-spacing:4px; margin-bottom:8px; }
#daily-all-done .done-sub   { font-family:"Cinzel",serif; font-size:12px; color:#a0c8a0; margin-bottom:26px; }
#daily-all-done .done-btn   {
  background:linear-gradient(135deg,#1a4a28,#27ae60);
  border:2px solid rgba(100,220,100,.6); border-radius:10px; color:#fff;
  font-family:"Cinzel",serif; font-size:13px; letter-spacing:3px;
  padding:11px 34px; cursor:pointer; transition:.2s;
}
#daily-all-done .done-btn:hover { border-color:#7af09a; }