/* Layout: cielo a tutto schermo; orologio in alto a sinistra, tempo in basso, strumenti in un pannello a destra (cassetto su telefono) */
:root{
  --void:#04060a;
  --glass:rgba(9,13,21,.88);
  --glass-hi:rgba(22,29,43,.95);
  --rule:rgba(160,182,214,.16);
  --ink:#e8edf4;
  --mute:#8f9bad;
  --amber:#f2b45c;
  --amber-ink:#1b1206;
  --sky:#7fb2ff;
  --f-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --r:10px;
  color-scheme:dark;
}
html,body{height:100%;overflow:hidden}
[hidden]{display:none!important}
body{background:var(--void);color:var(--ink);font:14px/1.45 var(--f-body);-webkit-font-smoothing:antialiased}
#app{position:fixed;inset:0}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#view.dragging{cursor:grabbing}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* etichette dei corpi */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;font:600 12px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;text-shadow:0 0 6px #000,0 0 2px #000;will-change:transform}
.lbl i{display:inline-block;width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;margin-right:6px;vertical-align:1px}
.lbl.nodot i{display:none}
.lbl.sun{color:#ffd28a}.lbl.moon{color:#cdd6e4}.lbl.earth{color:#9cc4ff}
.lbl.card{color:var(--amber);font-size:13px;letter-spacing:.2em}

/* orologio */
.hud-top{position:absolute;left:0;top:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0 max(16px,env(safe-area-inset-left,0px));display:flex;gap:18px;align-items:flex-start;pointer-events:none}
.clock .eyebrow{font:600 12px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.clock .date{font:500 26px/1.1 var(--f-label);letter-spacing:.02em;margin-top:8px;text-shadow:0 1px 8px #000}
.clock .time{font:500 30px/1.1 var(--f-data);font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 1px 8px #000}
.clock .utc{font:400 12px/1.4 var(--f-data);color:var(--mute);font-variant-numeric:tabular-nums;margin-top:2px}
.phase{display:flex;gap:10px;align-items:center;margin-top:30px;padding:8px 12px 8px 8px;background:var(--glass);border:1px solid var(--rule);border-radius:var(--r)}
.phase canvas{width:44px;height:44px;display:block}
.phase .pn{font:600 15px/1.1 var(--f-label);letter-spacing:.04em}
.phase .pi{font:400 12px/1.4 var(--f-data);color:var(--mute);font-variant-numeric:tabular-nums}

/* pannello */
#panel{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:300px;overflow-y:auto;overscroll-behavior:contain;background:var(--glass);border:1px solid var(--rule);border-radius:14px;scrollbar-width:thin}
#panel section{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px}
#panel section:last-child{border-bottom:0}
#panel h2{margin:0;font:600 12px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.views{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 10px;border-radius:8px;border:1px solid var(--rule);background:transparent;text-align:left}
.vbtn b{font:600 15px/1.1 var(--f-label);letter-spacing:.03em}
.vbtn span{font-size:12px;color:var(--mute);line-height:1.25}
.vbtn:hover{background:rgba(255,255,255,.04)}
.vbtn[aria-pressed="true"]{border-color:var(--amber);background:rgba(242,180,92,.10)}
.vbtn[aria-pressed="true"] b{color:var(--amber)}
.seg{display:flex;border:1px solid var(--rule);border-radius:8px;padding:2px;gap:2px}
.seg button{flex:1;border:0;background:transparent;padding:6px 8px;border-radius:6px;font:600 13px/1.1 var(--f-label);letter-spacing:.06em;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--glass-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row>span{font-size:13px;color:var(--mute)}
.note{margin:0;font-size:12px;color:var(--mute);line-height:1.4}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.toggles label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:3px 0}
.toggles input{accent-color:var(--amber);width:15px;height:15px;margin:0}
.ev{display:grid;grid-template-columns:1fr auto auto;gap:4px 6px;align-items:center}
.ev span{font-size:13px}
.ev button{width:34px;height:28px;border-radius:6px;border:1px solid var(--rule);background:transparent;display:grid;place-items:center}
.ev button:hover{border-color:var(--amber);color:var(--amber)}
.ev svg{width:14px;height:14px}
dl.data{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}
dl.data dt{color:var(--mute)}
dl.data dd{margin:0;text-align:right;font:400 12.5px/1.45 var(--f-data);font-variant-numeric:tabular-nums}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.field select,.field input{background:var(--glass-hi);border:1px solid var(--rule);border-radius:7px;padding:6px 8px;font:400 13px var(--f-data);color:var(--ink);min-width:0}
.coords{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.pill{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:5px 11px;font:600 13px/1.1 var(--f-label);letter-spacing:.05em}
.pill[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.credits p{margin:0;font-size:12px;color:var(--mute);line-height:1.5}
.credits a{color:var(--ink)}

/* barra del tempo */
.timebar{position:absolute;left:0;right:0;bottom:0;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:linear-gradient(to top,rgba(4,6,10,.92),rgba(4,6,10,.55) 70%,transparent)}
.tgroup{display:flex;gap:4px;align-items:center}
.tbtn{height:38px;min-width:38px;padding:0 10px;border-radius:9px;border:1px solid var(--rule);background:var(--glass);font:600 13px/1 var(--f-label);letter-spacing:.05em;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tbtn:hover{border-color:rgba(242,180,92,.5)}
.tbtn svg{width:16px;height:16px}
#play{width:48px;height:48px;border-radius:50%;background:var(--amber);color:var(--amber-ink);border:0}
#play svg{width:20px;height:20px}
#rev[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.speeds{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 300px;padding:2px}
.speeds::-webkit-scrollbar{display:none}
.speeds button{flex:none;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--rule);background:var(--glass);font:500 12.5px/1 var(--f-data);color:var(--mute);white-space:nowrap}
.speeds button[aria-pressed="true"]{background:var(--ink);color:var(--void);border-color:var(--ink)}
#dt{height:38px;background:var(--glass);border:1px solid var(--rule);border-radius:9px;padding:0 8px;font:400 13px var(--f-data);color:var(--ink);min-width:0}
#optBtn{display:none}

.vbtn.wide{grid-column:span 2}
.dock{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(var(--tb,84px) + 4px);max-width:calc(100% - 360px);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:stretch;padding:10px 12px;background:var(--glass);border:1px solid var(--rule);border-radius:12px}
.scalectl{display:flex;flex-direction:column;gap:4px;width:250px;min-width:0}
.dl{display:flex;justify-content:space-between;align-items:baseline;font:600 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.dl output{white-space:nowrap;font:500 13px/1 var(--f-data);letter-spacing:0;text-transform:none;color:var(--ink)}
.scalectl input[type=range]{width:100%;margin:4px 0 0;accent-color:var(--amber)}
.toggles+.sub{margin-top:4px}
.sub{font:600 11px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.stops{display:flex;justify-content:space-between}
.stops button{background:none;border:0;padding:2px 0;font:600 12.5px/1.1 var(--f-label);letter-spacing:.06em;color:var(--mute)}
.stops button.on{color:var(--amber)}
.zoomctl{display:flex;flex-direction:column;gap:4px}
.zoomctl button{width:38px;flex:1;min-height:28px;border-radius:7px;border:1px solid var(--rule);background:var(--glass-hi);font:500 18px/1 var(--f-data)}
.zoomctl button:hover,.motibtn:hover{border-color:rgba(242,180,92,.55)}
.motibtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:64px;padding:6px 10px;border-radius:9px;border:1px solid var(--rule);background:var(--glass-hi);font:600 13px/1 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.motibtn svg{width:24px;height:24px}
.motibtn[aria-pressed="true"]{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.camdist{flex-basis:100%;margin:0;font:400 11.5px/1.3 var(--f-data);color:var(--mute);font-variant-numeric:tabular-nums}
.moti{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(158px + env(safe-area-inset-top,0px));width:350px;max-height:calc(100% - 158px - var(--tb,84px) - 130px);overflow-y:auto;background:var(--glass);border:1px solid var(--rule);border-radius:14px;padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.moti header{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.moti h2{margin:0;font:600 12px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
#motiClose,#galClose{width:28px;height:28px;border-radius:7px;border:1px solid var(--rule);background:transparent;font-size:16px;line-height:1}
.mrows{display:flex;flex-direction:column;gap:2px}
.mrow{display:grid;grid-template-columns:38px 1fr auto auto;gap:2px 10px;align-items:center;padding:6px;border-radius:9px;border:1px solid transparent;cursor:pointer}
.mrow:hover{background:rgba(255,255,255,.03)}
.mrow.on{background:rgba(255,255,255,.05);border-color:var(--rule)}
.mrow svg{width:38px;height:38px;display:block}
.mrow b{display:block;font:600 14.5px/1.15 var(--f-label);letter-spacing:.02em}
.mrow small{display:block;font:400 11.5px/1.35 var(--f-data);color:var(--mute)}
.mrow .giri{font:500 13px/1.2 var(--f-data);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mrow .giri small{text-align:right}
.mrow .go{height:28px;padding:0 9px;border-radius:999px;border:1px solid var(--rule);background:transparent;font:600 12.5px/1 var(--f-label);letter-spacing:.05em}
.mrow .go:hover,.mrow.on .go{border-color:var(--amber);color:var(--amber)}
.mfoot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 4px}
.mfoot span{margin-left:auto;font:400 11.5px var(--f-data);color:var(--mute)}
.mcap{margin:0;padding:10px 6px 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.5;color:var(--ink)}
.mcap:empty{display:none}
#toast{position:absolute;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:min(520px,calc(100% - 32px));padding:10px 16px;background:var(--glass-hi);border:1px solid rgba(242,180,92,.45);border-radius:10px;font-size:13.5px;line-height:1.4;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#toast b{font:600 15px/1.2 var(--f-label);letter-spacing:.04em;color:var(--amber);display:block}
#loader{position:absolute;inset:0;display:grid;place-items:center;background:var(--void);z-index:5;transition:opacity .6s}
#loader .box{width:min(320px,80vw);display:flex;flex-direction:column;gap:12px}
#loader .t{font:600 13px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
#loader .bar{height:3px;background:var(--rule);border-radius:3px;overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .2s}
#loader .s{font-size:13px;color:var(--mute)}

/* modalità galassia: via l'interfaccia di Sole, Terra e Luna, resta il riquadro in basso con zoom e Galassia */
#app.galaxy #panel,#app.galaxy .timebar,#app.galaxy #hudMain,#app.galaxy #moti,#app.galaxy #labels,#app.galaxy .scalectl,#app.galaxy #motiBtn,#app.galaxy .camdist,#app.galaxy #toast{display:none!important}
#glabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl.gal{color:#d9c6ff}.lbl.arm{color:#9fbcff;font-size:11px;letter-spacing:.16em;opacity:.75}
.gtime{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#gPlay{width:34px;height:30px;border-radius:8px;border:0;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center}
#gPlay svg{width:14px;height:14px}
.gspeeds{display:flex;gap:4px;flex-wrap:wrap}
.gspeeds button{height:28px;padding:0 9px;border-radius:999px;border:1px solid var(--rule);background:transparent;font:500 12px/1 var(--f-data);color:var(--mute)}
.gspeeds button[aria-pressed="true"]{background:var(--ink);color:var(--void);border-color:var(--ink)}
.toggles label.off{opacity:.38;cursor:default}
.ginfo{border:1px solid rgba(217,198,255,.35);border-radius:10px;padding:10px;font-size:12.5px;line-height:1.45;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ginfo b{color:#d9c6ff;font:600 14px/1.2 var(--f-label);letter-spacing:.04em}
#gChart{width:100%;height:90px;display:block}
#gal>*{flex-shrink:0}
#ghud .utc{max-width:460px}

@media (max-width:820px){
  #panel{top:auto;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;bottom:calc(var(--tb,150px) + 6px);max-height:calc(100% - var(--tb,150px) - 120px);transform:translateY(calc(100% + 160px));transition:transform .3s ease}
  #panel.open{transform:none}
  #optBtn{display:inline-flex}
  .clock .date{font-size:20px}.clock .time{font-size:22px}
  .phase{margin-top:22px}
  .speeds{order:5;flex-basis:100%}
  .dock{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));max-width:none;padding:8px 10px;gap:6px 10px}
  .scalectl{flex:1;width:auto}
  .speedctl{display:none}
  #gal{max-height:42vh}
  .hint2{display:none}
  .moti{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;top:calc(118px + env(safe-area-inset-top,0px));max-height:calc(100% - 118px - var(--tb,150px) - 150px)}
  .moti{padding:8px 8px 10px;gap:6px;max-height:calc(100% - 118px - var(--tb,150px) - 120px)}
  .mrows{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .mrow{grid-template-columns:30px 1fr;gap:0 8px;padding:5px;border-color:var(--rule)}
  .mrow svg{width:30px;height:30px;grid-row:span 2}
  .mrow b{font-size:12.5px;line-height:1.1}
  .mrow>div>small,.mrow .go,.mrow .giri small{display:none}
  .mrow .giri{text-align:left;font-size:11.5px}
  .mrow .giri::after{content:" giri";color:var(--mute)}
  .mcap{font-size:12.5px;max-height:6.4em;overflow-y:auto;padding-top:8px}
  .timebar{gap:8px}
  #rev .rl{display:none}
}
@media (max-width:480px){
  .hud-top{gap:10px}
  .phase{padding:6px 8px 6px 6px}.phase canvas{width:34px;height:34px}
  #dt{width:150px}
}
@media (prefers-reduced-motion:reduce){#panel,#loader{transition:none}}