/* Panes fyrir rauntímalög */
.leaflet-pane.fa-clouds-pane    { z-index: 410; }
.leaflet-pane.fa-aurora-pane    { z-index: 420; }

/* Clouds: aðeins gegnsætt */
.fa-clouds-pane img {
  opacity: var(--fa-clouds-opacity, 0.02);
  filter: saturate(0) brightness(1.2) contrast(1.15);
}

/* Aurora: blanda „screen“ til að lýsa map softly */
.fa-aurora-pane svg, .fa-aurora-pane canvas, .fa-aurora-pane img {
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
}
.leaflet-image-layer.aurora-soft, .aurora-soft{
  filter: blur(12px) saturate(115%) contrast(108%) brightness(108%);
  mix-blend-mode: screen;
  opacity: .42;
  image-rendering: auto;
  pointer-events: none;
}
/* --- Panel container --- */
.panel {
  position: fixed;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Mobile portrait -> bottom panel */
.panel.bottom {
  left: 20px;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Desktop + landscape -> side panel */
.panel.side {
  top: 100px;
  right: 20px;
  width: 340px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

/* Panel buttons */
.panel .btn { width: 100%; }

/* ef panel rekst í controls-dálkinn, bættu gutter */
@media (min-width:1024px){
  .panel.side{ right: calc(20px + 64px); } /* 64px ≈ breidd zoom/fána-stafla */
}

/* smá bakgrunnur svo texti lesist yfir kortið */
.panel{ background: linear-gradient(180deg, rgba(9,15,25,.55), rgba(12,18,28,.35)); border:1px solid var(--outline); border-radius:16px; padding:18px; backdrop-filter: blur(8px); }

/* Sími (landscape): controls & flag í láréttri röð yfir sidepanel, panel minna */
@media (max-width:1023px) and (orientation:landscape){
  /* Flag hægra megin efst */
  .flag{
    top: 16px;
    right: 16px;
    z-index: 961;
  }
  /* Zoom + center í láréttri röð, vinstra megin við fánann */
  .controls{
    top: 16px;
    right: 88px;            /* rými fyrir fánann (≈ 48px + bil) */
    flex-direction: row;
    gap: 10px;
    z-index: 960;
  }

  /* Sidepanel byrjar fyrir neðan röðina og er minna “box” */
  .side{
    display: flex !important;
    position: fixed;
    right: 16px;
    top: 84px;              /* undir controls/flag */
    width: min(320px, 90vw);
    max-height: calc(100vh - 110px);
    overflow: auto;
    background: linear-gradient(180deg, rgba(9,15,25,.55), rgba(12,18,28,.35));
    border: 1px solid var(--outline);
    border-radius: 16px;
    padding: 16px;
    backdrop-filter: blur(8px);
    z-index: 950;
  }
  .side .btn{ width:100%; }
}
/* fela gamla titilinn og textann úr sidepanelinu */
.side h3[data-i18n="panel.tonight_title"],
.side #tonightText {
  display: none !important;
}

/* PORTRAIT (≤1023px): sýna bottom-panel, fela sidepanel */
@media (max-width:1023px) and (orientation:portrait){
  .side{ display:none !important; }
  #mobile-actions{
    position: fixed;
    z-index: 950;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 92vw);
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 10px;
    padding: 0;
  }
  #mobile-actions .btn,
  #mobile-actions .card{ width:100%; }
}
/* LANDSCAPE (≤1023px): fela bottom, nota lítið sidepanel; hnappastýringar ofan við */
@media (max-width:1023px) and (orientation:landscape){
  #mobile-actions{ display:none; }

  /* Flag hægra megin */
  .flag{ top:16px; right:16px; z-index:961; }

  /* Zoom + center í láréttri röð, vinstra við fánann */
  .controls{
    top:16px;
    right:88px;           /* 48px flagg + bil */
    flex-direction: row;
    gap:10px;
    z-index:960;          /* yfir sidepanel */
  }

  /* Compact sidepanel hægra megin, ekki rekast í hnappa */
  .side{
    display:flex !important;
    position: fixed;
    right:16px;
    top:84px;             /* undir controls/flag röðinni */
    width:min(360px, 92vw);           /* 360px til að forðast ljóta wrap á texta */
    max-height:calc(100vh - 110px);
    overflow:auto;
    background:linear-gradient(180deg, rgba(9,15,25,.55), rgba(12,18,28,.35));
    border:1px solid var(--outline);
    border-radius:16px;
    padding:14px;
    backdrop-filter:blur(8px);
    z-index:950;
  }

  /* hnappastærðir/hæð fyrir snyrtilegan rythm */
  .side .btn{ width:100%; height:48px; font-size:16px; }
  .side .card.ad{ padding:10px 12px; }
  .side .btn-ad{ height:46px; }
}
/* MOBILE PORTRAIT: sýna bottom panel og fela sidepanel */
@media (max-width:1023px) and (orientation:portrait){
  .side{ display: none !important; }

  .bottom{
    display: flex !important;          /* <- force show */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 92vw);
    bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 10px;
    z-index: 950;
    padding: 0;
  }

  .bottom .btn,
  .bottom .card{ width: 100%; }
}
/* MOBILE LANDSCAPE: fela bottom, nota mjótt sidepanel; raðað LÓÐRÉTT */
@media (max-width:1023px) and (orientation:landscape){
  .bottom{ display: none !important; }

  /* hnappastýringar efst í LÁRÉTTRI röð, fáninn lengst til hægri */
  .flag{ top:16px; right:16px; z-index:961; }
  .controls{
    top:16px;
    right:88px;                    /* ~48px flag + bil */
    flex-direction: row !important;
    gap:10px;
    z-index:960;
  }

  /* sidepanel = lítið box; INNIHALD LÓÐRÉTT (ekki hlið við hlið) */
  .side{
    display:flex !important;
    flex-direction: column;        /* <- lykilatriði */
    align-items: stretch;
    position: fixed;
    right:16px;
    top:84px;                      /* undir controls/flag */
    width:min(360px, 92vw);
    max-height:calc(100vh - 110px);
    gap:10px;                      /* bil milli banneranna */
    overflow:auto;
    background: linear-gradient(180deg, rgba(9,15,25,.55), rgba(12,18,28,.35));
    border:1px solid var(--outline);
    border-radius:16px;
    padding:14px;
    backdrop-filter: blur(8px);
    z-index:950;
  }

  .side > { width:100%; }         / hnappar/kort fylli breidd */
  .side .btn{ height:48px; font-size:16px; }
  .side .card.ad{ padding:10px 12px; }
  .side .btn-ad{ height:46px; }
}
/* Pulsandi rauður hringur */
.pulse-marker {
  background: rgba(255,0,0,0.7);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  position: relative;
}

.pulse-marker::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  left: -9px;
  top: -9px;
  border-radius: 50%;
  background: rgba(255,0,0,0.4);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}