:root { --bg: rgba(20,24,30,.82); --bg2: rgba(40,46,56,.9); --fg:#eef2f6; --accent:#2f9bd6; }
* { box-sizing: border-box; }
html,body { margin:0; height:100%; font-family:-apple-system,Segoe UI,Roboto,sans-serif; }
#map { position:absolute; inset:0; }

.panel {
  position:absolute; background:var(--bg); color:var(--fg);
  border-radius:12px; backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.35);
  z-index:5; user-select:none;
}

#title { top:10px; left:10px; padding:8px 12px; font-weight:700; }
#title .logo { font-size:16px; color:var(--fg); text-decoration:none; letter-spacing:.2px; }
#title .logo .big { font-size:1.5em; font-weight:800; }
#title .logo:hover { text-decoration:underline; }
#title #sub { display:block; font-size:11px; font-weight:500; opacity:.7; }

#arrows { position:absolute; inset:0; z-index:4; pointer-events:none; }
#modes, #windopts, #cloudtypes { left:50%; transform:translateX(-50%); display:flex; gap:4px; padding:5px; }
#modes { top:10px; }
#windopts, #cloudtypes { top:52px; }
#windopts[hidden], #cloudtypes[hidden] { display:none; }
#modes button, #windopts button, #cloudtypes button { appearance:none; border:0; background:var(--bg2); color:var(--fg); padding:6px 12px; border-radius:7px; font-size:12px; cursor:pointer; opacity:.55; }
#modes button.active, #windopts button.active, #cloudtypes button.active { opacity:1; background:var(--accent); font-weight:600; }
#modes button, #windopts button { width:42px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
#modes svg, #windopts svg { width:21px; height:21px; display:block; }

/* legend (left) */
#legend { top:78px; left:10px; padding:9px 12px 11px; }
#legend .ltitle { font-size:11px; font-weight:700; opacity:.85; margin-bottom:8px; }
#legend .lwrap { position:relative; height:190px; width:40px; }
#legend .bar { position:absolute; left:0; top:0; width:13px; height:100%; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
#legend .tick { position:absolute; left:20px; bottom:0; font-size:11px; line-height:1; transform:translateY(50%); white-space:nowrap; opacity:.92; }
#legend .tick::before { content:''; position:absolute; left:-7px; top:50%; width:5px; height:1px; background:rgba(255,255,255,.55); }

/* level selector (right) */
#levels { top:10px; right:10px; padding:6px; max-height:80vh; overflow:auto; display:flex; flex-direction:column; gap:3px; }
#levels .grp { font-size:10px; opacity:.6; margin:4px 4px 1px; }
#levels button {
  appearance:none; border:0; background:var(--bg2); color:var(--fg);
  padding:6px 10px; border-radius:7px; font-size:12px; min-width:74px; text-align:right; cursor:pointer;
}
#levels button.active { background:var(--accent); font-weight:700; }

/* time bar (bottom) */
#timebar { bottom:18px; left:50%; transform:translateX(-50%); padding:8px 12px 9px; width:min(540px,93vw); }
#days { display:flex; gap:4px; margin-bottom:7px; }
#days button { flex:1; appearance:none; border:0; background:var(--bg2); color:var(--fg); padding:5px 0; border-radius:6px; font-size:11px; cursor:pointer; opacity:.65; text-transform:capitalize; }
#days button.active { opacity:1; background:var(--accent); font-weight:700; }
#tline { display:flex; align-items:center; gap:8px; }
#tline input { flex:1; accent-color:var(--accent); }
.tbtn { appearance:none; border:0; background:var(--bg2); color:var(--fg); width:28px; height:24px; border-radius:6px; cursor:pointer; font-size:10px; line-height:1; }
.tbtn:hover { background:var(--accent); }
#tinfo { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; }
#tinfo #tlt { font-weight:600; }
#tinfo #trun { opacity:.7; }

#attrib { position:absolute; bottom:2px; right:6px; z-index:5; font-size:10px; color:#222; background:rgba(255,255,255,.6); padding:1px 6px; border-radius:4px; }
#err { top:50%; left:50%; transform:translate(-50%,-50%); padding:14px 18px; max-width:80vw; color:#ffd; }

/* puntatore stile Windy: chip fluttuante col valore esatto sotto cursore/dito */
#ptr{
  position:fixed; z-index:20; pointer-events:none; transform:translate(-50%, calc(-100% - 12px));
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  background:rgba(16,20,28,.9); color:#eef2f6; border-radius:9px; padding:5px 9px;
  font:600 13px/1 -apple-system,Segoe UI,Roboto,sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,.42); backdrop-filter:blur(6px);
}
#ptr[hidden]{ display:none; }
#ptr b{ font-size:16px; font-weight:800; }
#ptr span{ opacity:.65; font-weight:600; font-size:11px; }
#ptr i{ font-style:normal; font-weight:700; opacity:.9; margin-left:3px; padding-left:7px; border-left:1px solid rgba(255,255,255,.2); }
#ptr .pa{ width:16px; height:16px; color:#bfe0ff; flex:0 0 auto; }
#ptr::after{ content:''; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid rgba(16,20,28,.9); }

@media (max-width:560px){
  #legend { top:74px; } #legend .lwrap{ height:150px; }
  #levels{ max-height:60vh; padding:4px; } #levels button{ min-width:56px; font-size:11px; padding:5px 8px; }
  #title{ padding:6px 9px; } #title .logo{ font-size:14px; } #title #sub{ display:none; }
  #modes button, #windopts button{ width:36px; height:31px; } #modes svg, #windopts svg{ width:18px; height:18px; }
  #cloudtypes button{ padding:5px 8px; font-size:11px; }
  #timebar{ width:95vw; bottom:14px; }
}

/* PWA installata: rispetta notch / status bar translucida (iOS) e home-indicator.
   env(safe-area-inset-*) vale 0 sui device senza notch → innocuo. */
@media (display-mode: standalone){
  #title, #modes { top: calc(10px + env(safe-area-inset-top)); }
  #title { left: calc(10px + env(safe-area-inset-left)); }
  #windopts, #cloudtypes { top: calc(52px + env(safe-area-inset-top)); }
  #legend { top: calc(78px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
  #levels { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
  #timebar { bottom: calc(18px + env(safe-area-inset-bottom)); }
  #attrib { bottom: calc(2px + env(safe-area-inset-bottom)); }
}