html, body {
  margin:0;
  padding:0;
  height:100%;
  min-height:100vh;
  color:white;
  font-family:sans-serif;
  overflow:hidden;
  background:#000;
}
.app-bg{
  position:fixed;
  inset:0;
  background:url('../assets/space.jpg') center/cover no-repeat;
  z-index:0;
}

.universe,
.topbar,
.welcome,
.dashboard-bar{
  position:relative;
  z-index:1;
}

/* Gestione safe area iOS */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.logo-top {
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
}

.logo-top img {
  width:160px;
}


/* TOP */
.topbar {
  position:absolute;
  top:15px;
  left:20px;
  font-size:18px;
}

.welcome {
  position:absolute;
  top:120px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  width:90%;
}

.welcome h1 {
  margin:0;
  font-size:48px;
  font-weight:700;
}

.welcome p {
  margin:8px 0 0;
  font-size:20px;
  opacity:.8;
}

/* UNIVERSO */
.universe {
  position:relative;
  height:100vh;
  z-index:1;
}



/* Sole */
.sun {
  position:absolute;
  top:58%;
  left:50%;
  transform:translate(-50%, -50%);
}

.sun img {
  width:220px;
}

/* Pianeti */

.planet {
  position:absolute;
  width:120px;
  height:120px;
  cursor:pointer;
}

/* INNER → gestisce grafica + animazioni */
.planet-inner {
  width:100%;
  height:100%;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  transition:transform .25s ease;
  will-change: transform;
}

/* ANIMAZIONI FLUIDE */
.planet:active .planet-inner {
  transform:scale(0.92);
}

.planet:hover .planet-inner {
  transform:scale(1.1);
}

.planet span {
  position:relative;
  z-index:2;
  font-size:14px;
  font-weight:bold;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
}


/* Posizioni orbitali */

/* Gazzetta rosa sopra */
.p7 {
  top:28%;
  left:50%;
  transform:translateX(-50%);
}

/* Ecommerce sinistra */
.p1 {
  top:40%;
  left:5%;
}

/* Numerologia destra */
.p2 {
  top:40%;
  right:5%;
}

/* News (saturno grande) */
.p5 {
  bottom:18%;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:150px;
}

/* Eventi */
.p3 {
  bottom:18%;
  left:50%;
}

/* Area Riservata */
.p4 {
  bottom:28%;
  right:5%;
}

/* Gruppo Zero */
.p6 {
  top:55%;
  left:5%;
}








.p1 .planet-inner {
  background-image:url('../assets/planets/ecommerce.png');
}

.p2 .planet-inner {
  background-image:url('../assets/planets/numerologia.png');
}

.p3 .planet-inner {
  background-image:url('../assets/planets/eventi.png');
}

.p4 .planet-inner {
  background-image:url('../assets/planets/area.png');
}

.p5 .planet-inner {
  background-image:url('../assets/planets/news.png');
}

.p6 .planet-inner {
  background-image:url('../assets/planets/gruppo.png');
}

.p7 .planet-inner {
  background-image:url('../assets/planets/gazzetta.png');
}






/* ===== BOTTOM BAR DASHBOARD ===== */

.center-logo-circle {
  cursor:pointer;
  transition: transform .2s ease;
}

.dashboard-bar {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
  background:#000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 25px;
  z-index:50;
}

.bar-left img {
  width:28px;
  cursor:pointer;
}

.bar-center {
  position:absolute;
  left:50%;
  transform:translateX(-85%);
}

.center-logo-circle {
  width:70px;
  height:70px;
  background:#111;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  top:-25px;
}

.center-logo-circle img {
  width:38px;
}

/* SPLASH */
#splash {
  position:fixed;
  width:100%;
  height:100%;
  background:#1F0197;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2000;
  transition:opacity 1s ease;
}

.logo {
  width:120px;
  animation:pulse 2s infinite;
}



.bottom-menu {
  display:none;
  position:absolute;
  bottom:25px;
  left:25px;
  width:45px;
  height:45px;
  z-index:20;
  cursor:pointer;
}

.bottom-menu img {
  width:100%;
}


/* Calcolatore*/

#dailyCalculator {
  margin-top:15px;
  display:flex;
  justify-content:center;
}

.calc-line {
  font-size:20px;
  font-weight:500;
  color:white;
}

.calc-code {
  font-weight:800;
  font-size:20px;
  margin-left:0px;
  color:#ff7a00;
}



/* OVERLAY */
.install-sheet{
position:fixed;
inset:0;
background:rgba(0,0,0,.35);
backdrop-filter:blur(8px);
display:flex;
align-items:flex-end;
justify-content:center;
z-index:999999;
transition:.4s;
}

.install-sheet.hidden{
opacity:0;
pointer-events:none;
}

/* CARD */
.install-card{
width:100%;
max-width:500px;
background:white;
border-radius:22px 22px 0 0;
padding:25px;
animation:slideUp .45s ease;
font-family:sans-serif;
color:#222;
}

@keyframes slideUp{
from{transform:translateY(100%);}
to{transform:translateY(0);}
}

/* TEXT */
.install-card h2{
margin:0;
font-size:22px;
}

.install-card p{
margin:6px 0 20px;
color:#666;
}

/* STEPS */
.step{
display:flex;
gap:12px;
align-items:center;
padding:12px 0;
border-bottom:1px solid #eee;
}

.num{
width:28px;
height:28px;
border-radius:50%;
background:#e44;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

/* BUTTONS */
.actions{
display:flex;
gap:10px;
margin-top:20px;
}

.actions button{
flex:1;
padding:14px;
border:none;
border-radius:12px;
font-size:16px;
cursor:pointer;
}

#installOk{
background:#4b3b2a;
color:white;
}

#installLater{
background:#eee;
}