:root{
  --bg:#0c1222; --fg:#f4f7fb; --muted:#b6c2d6; --gold:#f7d774;
  --past:#8e9bb5; --future:#7ac0ff; --today:#ff2b2b;
}

*{box-sizing:border-box}
body{ margin:0; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--fg); min-height:100dvh; position:relative; overflow-x:hidden; }

/* pozadí + sněžení */
.lights-bg{ position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 80% 40%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 65% 75%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 80%, rgba(255,255,255,.3) 50%, transparent 51%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,0) 45%);
}
.snow-canvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

.lights-bg::before{
  content:""; position:absolute; left:0; right:0; top:0; height:130px;
  background:
    radial-gradient(9px 9px at 6% 60%, rgba(255,210,120,.85), transparent 60%),
    radial-gradient(9px 9px at 14% 40%, rgba(255,120,120,.9), transparent 60%),
    radial-gradient(9px 9px at 24% 55%, rgba(120,210,255,.9), transparent 60%),
    radial-gradient(9px 9px at 34% 45%, rgba(255,240,170,.95), transparent 60%),
    radial-gradient(9px 9px at 44% 60%, rgba(120,255,180,.9), transparent 60%),
    radial-gradient(9px 9px at 54% 40%, rgba(255,140,200,.9), transparent 60%),
    radial-gradient(9px 9px at 64% 55%, rgba(255,210,120,.9), transparent 60%),
    radial-gradient(9px 9px at 74% 45%, rgba(120,210,255,.9), transparent 60%),
    radial-gradient(9px 9px at 84% 60%, rgba(255,120,120,.95), transparent 60%),
    radial-gradient(9px 9px at 94% 40%, rgba(255,240,170,.95), transparent 60%),
    repeating-linear-gradient(to right, transparent 0 38px, rgba(255,255,255,.09) 38px 39px);
  box-shadow:0 6px 24px rgba(0,0,0,.25) inset; animation:twinkle 3.2s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes twinkle{ 0%{filter:brightness(.95);opacity:.95} 100%{filter:brightness(1.15);opacity:1} }

/* header */
.site-header{ padding:2.2rem 1rem 1rem; text-align:center; }
.site-header h1{ margin:0; font-size:clamp(1.6rem,4vw,3rem); font-weight:800; letter-spacing:.5px; color:var(--gold); text-shadow:0 2px 10px rgba(247,215,116,.35); }
.today{ margin-top:.35rem; color:var(--muted); font-weight:600; }

/* mapa */
.map{ position:relative; height:min(70vh,560px); margin:1rem auto; max-width:1100px; border-radius:16px; overflow:hidden; outline:1px solid rgba(255,255,255,.08); }
.leaflet-container{ background:#0b1020; }
.map .map-tint{ position:absolute; inset:0; pointer-events:none; z-index:2; background:
  radial-gradient(120% 60% at 50% 0%, rgba(255,120,120,.08), transparent 50%),
  radial-gradient(100% 50% at 50% 100%, rgba(255,210,120,.07), transparent 50%);
  mix-blend-mode:multiply; opacity:.9; }

/* ovládací lišta (jen toggle past + sníh) */
.list-section{ max-width:1100px; margin:1rem auto 3rem; padding:0 1rem; }
.controls{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem; }
.chip{ border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:var(--fg); border-radius:999px; padding:.35rem .7rem; cursor:pointer; font-weight:600; }
.chip.active{ background:rgba(255,255,255,.16); }

/* přepínač sněžení */
.switch{ display:inline-flex; align-items:center; gap:.5rem; }
.switch .label{ font-weight:600; color:var(--fg); }
.switch input{ display:none; }
.switch .slider{ width:42px; height:24px; border-radius:999px; background:rgba(255,255,255,.2); position:relative; display:inline-block; }
.switch .slider::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s; }
.switch input:checked + .slider{ background:#6ad0ff; }
.switch input:checked + .slider::after{ transform:translateX(18px); }

/* legend + seznam */
.list-section h2{ margin:.5rem 0 .5rem; font-size:1.25rem; }
.legend{ display:flex; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.badge{ font-size:.8rem; border-radius:999px; padding:.2rem .6rem; border:1px solid rgba(255,255,255,.15); }
.today-badge{ background:rgba(255,66,66,.22); }
.future-badge{ background:rgba(140,200,255,.2); }
.past-badge{ background:rgba(205,216,235,.2); }

.places-list{ list-style:none; padding-left:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:.6rem; }
.places-list li{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.6rem .75rem; display:flex; align-items:center; gap:.6rem; }

/* kruhové štítky */
.num-chip{ flex:0 0 36px; width:36px; height:36px; aspect-ratio:1/1; display:grid; place-items:center; font-weight:800; color:#111; background:var(--gold); border:2px solid rgba(255,255,255,.9); border-radius:50%; }
li.past .num-chip{ background:#cfd5e3; border-color:#e9ecf6; color:#5d6b89; }
li.future .num-chip{ background:#cfe8ff; border-color:#e5f2ff; color:#225; }
li.today .num-chip{ background:var(--today); border-color:#ffd0d0; color:#2b0000; }

li .meta{ display:grid; }
li .meta small{ color:var(--muted); }
li button.jump{ margin-left:auto; background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,.2); padding:.4rem .6rem; border-radius:8px; cursor:pointer; }
li button.jump:hover{ background:rgba(255,255,255,.08); }

/* popup a značky */
.leaflet-popup-content{ font:14px/1.5 'Montserrat',sans-serif; }
.leaflet-popup-content h3{ margin:0 0 .25rem; }
.leaflet-popup-content .date{ color:var(--muted); font-size:.9em; margin-bottom:.5rem; }
.leaflet-popup-content details{ margin-top:.5rem; }

.marker-num{ width:36px; height:36px; aspect-ratio:1/1; display:grid; place-items:center; font-weight:800; border:2px solid rgba(255,255,255,.9); color:#111; background:var(--gold); border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.45); }
.marker-num.future{ background:#cfe8ff; border-color:#e5f2ff; color:#225; }
.marker-num.past{ background:#cfd5e3; border-color:#e9ecf6; color:#5d6b89; }
.marker-num.today{ background:#ff2b2b; border-color:#ffd0d0; color:#2b0000; transform:scale(1.14); box-shadow:0 0 0 8px rgba(255,43,43,.22), 0 0 30px rgba(255,43,43,.55), 0 12px 24px rgba(0,0,0,.5); animation:pulse 1.6s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 8px rgba(255,43,43,.22),0 0 30px rgba(255,43,43,.55),0 12px 24px rgba(0,0,0,.5);} 50%{ box-shadow:0 0 0 12px rgba(255,43,43,.12),0 0 34px rgba(255,43,43,.65),0 12px 24px rgba(0,0,0,.5);} }

/* footer + go-home */
.site-footer{ text-align:center; color:var(--muted); padding:2rem 1rem; border-top:1px solid rgba(255,255,255,.08); }
.leaflet-control.gohome{ background:rgba(20,20,28,.9); border:1px solid rgba(255,255,255,.18); border-radius:10px; overflow:hidden; }
.leaflet-control.gohome button{ display:block; width:36px; height:36px; line-height:36px; text-align:center; background:transparent; color:#fff; border:0; cursor:pointer; font-size:18px; }
.leaflet-control.gohome button:hover{ background:rgba(255,255,255,.1); }