@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(font/EBGaramond-400.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(font/EBGaramond-400i.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(font/EBGaramond-500.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(font/EBGaramond-500i.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(font/Jost-400.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:400;font-display:swap;src:url(font/Jost-400i.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(font/Jost-500.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:500;font-display:swap;src:url(font/Jost-500i.woff2) format('woff2')}

:root{
  --sky:#02040a; --sky2:#0b1426;
  --ink:#e9e4d6; --ink-dim:#a39d8c; --line:rgba(233,228,214,.16); --glass:rgba(8,12,22,.72);
  --c-mare:#a9c1de; --c-cratere:#f3ecdc; --c-monte:#dcbc80; --c-rima:#93d2c2; --c-sito:#ffa25e;
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --lscale:1;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sky);color:var(--ink);font-family:var(--sans)}
#stage{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 55%,var(--sky2) 0%,var(--sky) 70%)}
canvas{display:block;touch-action:none;cursor:grab}
canvas.drag{cursor:grabbing}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lb{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:auto;cursor:pointer;
  font-family:var(--serif);line-height:1.05;text-shadow:0 0 3px #000,0 0 8px rgba(0,0,0,.9);
  will-change:transform,opacity;transition:opacity .25s}
.lb .it{display:block;font-size:.72em;opacity:.8;font-style:italic}
.lb:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.lb.mare{color:var(--c-mare);font-style:italic;letter-spacing:.14em;font-size:calc(19px*var(--lscale));text-align:center}
.lb.mare .it{letter-spacing:.06em}
.lb.cratere{color:var(--c-cratere);font-size:calc(15px*var(--lscale))}
.lb.monte{color:var(--c-monte);font-size:calc(15px*var(--lscale));letter-spacing:.05em}
.lb.rima{color:var(--c-rima);font-size:calc(14px*var(--lscale));font-style:italic}
.lb.sito{color:var(--c-sito);font-family:var(--sans);font-weight:500;font-size:calc(13px*var(--lscale));letter-spacing:.02em}
.lb .pt{position:absolute;left:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor;box-shadow:0 0 4px #000}
.lb.sito .pt{width:7px;height:7px;margin-top:-3.5px;left:-3.5px;border-radius:1px;transform:rotate(45deg)}
.lb .tx{display:inline-block;padding-left:9px}
.lb.mare .tx{padding-left:0}
.lb.sel .tx{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

#title{position:fixed;left:28px;top:22px;pointer-events:none}
#title h1{margin:0;font-family:var(--serif);font-weight:400;font-size:44px;letter-spacing:.02em;line-height:1}
#title p{margin:6px 0 0;color:var(--ink-dim);font-size:14px}

#panel{position:fixed;left:20px;bottom:20px;width:300px;max-height:calc(100% - 140px);overflow:auto;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;font-size:14px}
#panel h2{font-family:var(--serif);font-weight:500;font-size:17px;margin:14px 0 8px}
#panel h2:first-child{margin-top:0}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:none;color:var(--ink-dim);
  border-radius:999px;padding:5px 11px 5px 9px;font:inherit;font-size:13px;cursor:pointer}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.35}
.chip[aria-pressed=true]{color:var(--ink);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.chip[aria-pressed=true] i{opacity:1}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{flex:1;background:none;border:0;color:var(--ink-dim);font:inherit;font-size:13px;padding:6px 4px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:rgba(233,228,214,.12);color:var(--ink)}
.row{display:flex;align-items:center;gap:10px;margin:8px 0}
.row label{flex:0 0 78px;color:var(--ink-dim);font-size:13px}
.row input[type=range]{flex:1;accent-color:#cfc7b0}
.note{color:var(--ink-dim);font-size:12.5px;line-height:1.4;margin:4px 0 0}
.btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.btn:hover,.chip:hover,.seg button:hover{border-color:rgba(233,228,214,.4)}
button:focus-visible,input:focus-visible{outline:2px solid #cfc7b0;outline-offset:2px}
input[type=datetime-local]{background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 7px;font:inherit;font-size:13px;color-scheme:dark;flex:1;min-width:0}
#search{width:100%;background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px}
#results{list-style:none;margin:4px 0 0;padding:0;max-height:180px;overflow:auto}
#results li button{width:100%;text-align:left;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;padding:5px 6px;border-radius:6px;cursor:pointer;display:flex;gap:8px;align-items:center}
#results li button:hover,#results li button:focus-visible{background:rgba(233,228,214,.1)}
#results li i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
#card .dark{display:block;margin-top:10px;background:rgba(255,162,94,.12);border:1px solid rgba(255,162,94,.45);
  color:var(--c-sito);border-radius:8px;padding:6px 10px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
#card .dark[hidden]{display:none}
#card .dark:hover{background:rgba(255,162,94,.2)}

#card{position:fixed;right:20px;top:20px;width:340px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-left:3px solid var(--c);border-radius:14px;padding:18px 20px 18px;display:none}
#card.on{display:block}
#card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05;padding-right:26px}
#card .alt{font-family:var(--serif);font-style:italic;color:var(--ink-dim);font-size:19px;margin-top:2px}
#card .meta{color:var(--c);font-size:13px;margin:10px 0 0}
#card .coord{color:var(--ink-dim);font-size:13px;margin-top:2px}
#card p.txt{font-family:var(--serif);font-size:18px;line-height:1.45;margin:12px 0 0}
#card .x{position:absolute;right:12px;top:12px;background:none;border:0;color:var(--ink-dim);font-size:22px;cursor:pointer;line-height:1;padding:4px}

#tools{position:fixed;right:20px;bottom:20px;display:flex;gap:6px}
#tools .btn{background:var(--glass);backdrop-filter:blur(10px)}
#loading{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:22px;color:var(--ink-dim);pointer-events:none;transition:opacity .6s}
body.bare #panel,body.bare #title,body.bare #tools .hide-bare{display:none}

@media (max-width:720px){
  #title{left:16px;top:12px}
  #title h1{font-size:30px}
  #title p{display:none}
  #panel{left:8px;right:8px;width:auto;bottom:8px;max-height:52%;font-size:15px}
  #panel h2{font-size:16px;margin:12px 0 6px}
  #card{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:62%;overflow:auto;padding:16px 16px 18px}
  #card h3{font-size:27px}
  #card p.txt{font-size:17px}
  /* scheda aperta: i comandi si fanno da parte, non ci finiscono sotto */
  body.scheda #panel{display:none}
  /* pulsanti in colonna a destra: non si accavallano piu' al titolo */
  #tools{top:10px;bottom:auto;right:8px;flex-direction:column;align-items:flex-end;gap:5px}
  #tools .btn{padding:7px 11px}
  .chip,.seg button,.btn,#results li button{min-height:34px}
}
/* schermi bassi: telefono in orizzontale (largo ~850px, alto ~390px).
   Qui i fogli in basso non ci stanno: pannello e scheda diventano colonne laterali. */
@media (max-height:520px){
  #title{left:12px;top:8px}
  #title h1{font-size:24px}
  #title p{display:none}
  #panel{left:8px;right:auto;top:42px;bottom:8px;width:264px;max-height:none;
    font-size:13.5px;padding:12px 14px 12px}
  #panel h2{font-size:15px;margin:10px 0 6px}
  #results{max-height:120px}
  #card{left:auto;right:8px;top:8px;bottom:auto;width:300px;max-height:calc(100% - 16px);
    overflow:auto;padding:14px 16px 16px}
  #card h3{font-size:23px}
  #card .alt{font-size:16px}
  #card p.txt{font-size:15px;line-height:1.4;margin-top:8px}
  #card .meta,#card .coord{font-size:12px}
  #tools{right:8px;bottom:8px;top:auto;flex-direction:row;align-items:center;gap:5px}
  #tools .btn{padding:5px 9px;font-size:12px}
  body.scheda #panel{display:block}
}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}

/* ── Integrazione nel sito AMSA ── */
#card .more{display:inline-block;margin-top:14px;color:var(--c);font-size:14px;text-decoration:none;border-bottom:1px solid currentColor}
#card .more:hover{opacity:.8}
#back{color:var(--ink);text-decoration:none}
#back[hidden]{display:none}