/* Versione per il telefono: il cielo a tutto schermo, una barra di schede in basso e i comandi in
   pannelli che salgono dal fondo. Si appoggia a sim.css e ne cambia solo la disposizione. */
:root{--tabh:calc(64px + env(safe-area-inset-bottom,0px))}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
input,select{-webkit-user-select:auto;user-select:auto}

/* orologio più compatto */
.mob .hud-top{padding-top:calc(10px + env(safe-area-inset-top,0px));gap:10px}
.mob.can-install .hud-top{padding-right:116px}
.mob .clock .eyebrow{font-size:11px}
.mob .clock .date{font-size:17px;margin-top:6px;white-space:nowrap}
.mob .clock .time{font-size:22px}
.mob .clock .utc{font-size:11px}
.mob .phase{margin-top:16px;padding:6px 10px 6px 6px}
.mob .phase canvas{width:32px;height:32px}
.mob .phase .pn{font-size:13px}
.mob .phase .pi{font-size:11px}
.mob #ghud .utc{max-width:none}

.install{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:999px;border:0;background:var(--amber);color:var(--amber-ink);font:600 14px/1 var(--f-label);letter-spacing:.06em;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.install svg{width:18px;height:18px}

/* pulsanti flottanti: pausa e zoom */
.sheet-open .fabs{display:none}
.fabs{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(var(--tabh) + 14px);display:flex;flex-direction:column;gap:8px;align-items:center}
.fab{width:52px;height:52px;border-radius:50%;border:0;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.fab svg{width:20px;height:20px}
.mob .zoomctl{gap:6px}
.mob .zoomctl button{width:44px;height:44px;flex:none;border-radius:12px;font-size:22px;background:var(--glass)}

/* barra delle schede */
.tabbar{position:absolute;left:0;right:0;bottom:0;display:flex;padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));background:rgba(6,9,15,.94);border-top:1px solid var(--rule);z-index:3}
.tab{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:12px;background:none;color:var(--mute);font:600 11.5px/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.tab svg{width:23px;height:23px}
.tab[aria-pressed="true"]{color:var(--amber);background:rgba(242,180,92,.10)}
#app.galaxy .tab.main{display:none}

/* pannelli dal fondo: i propri e quelli dei moti e della galassia */
.mob .sheet,.mob #moti,.mob #gal{position:absolute;left:0;right:0;top:auto;bottom:var(--tabh);width:auto;max-height:min(60vh,calc(100% - 150px));overflow-y:auto;overscroll-behavior:contain;background:#090d15;border:1px solid var(--rule);border-bottom:0;border-radius:18px 18px 0 0;padding:4px max(14px,env(safe-area-inset-right,0px)) 16px max(14px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;box-shadow:0 -12px 30px rgba(0,0,0,.45);z-index:2}
.mob .sheet>*,.mob #moti>*,.mob #gal>*{flex-shrink:0}
.mob .sheet[hidden],.mob #moti[hidden],.mob #gal[hidden]{display:none}
.grab{align-self:center;width:56px;height:20px;border:0;background:none;padding:0;position:relative}
.grab::after{content:"";position:absolute;left:8px;right:8px;top:7px;height:5px;border-radius:3px;background:rgba(160,182,214,.4)}
.mob .collapsed>*:not(.grab):not(header){display:none!important}
.mob .collapsed{max-height:none}
.sheet header{display:flex;justify-content:space-between;align-items:center}
.sheet h2{margin:0;font:600 12px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.sheet header h2{color:var(--amber)}
.sheet .close,.mob #motiClose,.mob #galClose{width:36px;height:36px;border-radius:10px;border:1px solid var(--rule);background:transparent;font-size:18px;line-height:1}

/* contenuti più grandi da toccare */
.mob .vbtn{padding:11px 12px;min-height:56px}
.mob .seg button{padding:10px 8px;font-size:14px}
.mob .toggles label{padding:8px 0;font-size:14.5px}
.mob .toggles input{width:20px;height:20px}
.mob .pill{padding:9px 14px;font-size:14px}
.mob .ev button{width:44px;height:38px}
.mob .ev span{font-size:14px}
.mob .field select,.mob .field input{padding:10px;font-size:15px}
.mob .scalectl{width:auto;flex:none}
.mob .speedctl{display:flex}
.mob .scalectl input[type=range]{height:28px}
.mob .stops button{padding:6px 0;font-size:13px}
.mob .gspeeds button{height:34px;padding:0 12px;font-size:13px}
.mob #gPlay{width:44px;height:36px}
.mob .mcap{max-height:none;overflow:visible}
.mob .mrows{display:flex;flex-direction:column}
.mob .mrow{grid-template-columns:38px 1fr auto;padding:8px 6px;border-color:transparent}
.mob .mrow svg{width:38px;height:38px;grid-row:auto}
.mob .mrow b{font-size:14.5px}
.mob .mrow>div>small{display:block}
.mob .mrow .giri::after{content:none}
.mob .mrow .giri small{display:block}

/* la barra del tempo sta dentro al suo pannello */
.mob .timebar{position:static;padding:0;background:none;gap:8px}
.mob .timebar .tgroup{flex-wrap:wrap}
.mob .tbtn{height:44px;min-width:44px}
.mob #play{width:52px;height:52px}
.mob #rev .rl{display:inline}
.mob .speeds{order:5;flex-basis:100%;flex-wrap:wrap;overflow:visible}
.mob .speeds button{height:36px;padding:0 12px}
.mob #dt{height:44px;font-size:15px;width:auto;flex:1;min-width:180px}
.mob #optBtn{display:none!important}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45}
.steps svg{width:18px;height:18px;vertical-align:-3px}

@media (min-width:821px){
  /* su tablet e schermi grandi i pannelli restano a sinistra, stretti */
  .mob .sheet,.mob #moti,.mob #gal{left:max(16px,env(safe-area-inset-left,0px));right:auto;width:400px;border-radius:18px;border-bottom:1px solid var(--rule);bottom:calc(var(--tabh) + 12px)}
}