*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080503;color:#f7d98b}
body{font-family:Georgia,"Times New Roman",serif;overflow:hidden}

.viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#080503}

/* DESKTOP: intera scena in una schermata */
.scene{
  position:relative;
  width:min(100vw,150vh);
  max-width:100vw;
  max-height:100vh;
  aspect-ratio:3/2;
  overflow:hidden;
  isolation:isolate;
}
.scene-image{position:absolute;inset:0;background:url("assets/eremo-grotta.webp") center/100% 100% no-repeat;z-index:0}
.scene-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 53%,rgba(255,182,57,.06),transparent 24%),
    radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.20) 100%);
}

.hotspot,.lamp-hotspot{
  position:absolute;z-index:4;border:0;background:transparent;padding:0;
  cursor:pointer;border-radius:10px;outline:none
}
.hotspot:hover,.hotspot:focus-visible,.lamp-hotspot:hover,.lamp-hotspot:focus-visible{
  box-shadow:0 0 0 1px rgba(255,211,110,.18),0 0 26px rgba(255,174,54,.18);
  background:rgba(255,190,70,.03)
}

.community{left:7.2%;top:10.4%;width:12.7%;height:21.6%}
.journal{left:7.2%;top:34.4%;width:12.7%;height:20.7%}
.library{left:7.2%;top:57.6%;width:12.7%;height:20.6%}
.zodiak{right:7.1%;top:10.6%;width:12.7%;height:21.3%}
.quiet{right:7.1%;top:34.5%;width:12.7%;height:20.7%}
.markingegno{right:7.1%;top:57.8%;width:12.7%;height:20.3%}

/* Lampada */
.lamp-hotspot{left:38.5%;top:44.2%;width:23%;height:20%;border-radius:50%}
.lamp-glow{
  position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);
  width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,159,.46) 0%,rgba(255,182,58,.24) 30%,rgba(255,137,19,.08) 55%,transparent 72%);
  filter:blur(8px);pointer-events:none;animation:pulse 4.5s ease-in-out infinite;mix-blend-mode:screen
}
.glow-b{width:78%;opacity:.55;animation-delay:-2s;filter:blur(18px)}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.42}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:.9}
}

/* Giganteschi Bonsai:
   NON viene più disegnata una porta sopra lo sfondo.
   L'apertura naturale della grotta è il portale, quindi resta perfettamente integrata. */
.bonsai-opening{
  position:absolute;
  z-index:6;
  left:38.2%;
  top:20.0%;
  width:23.6%;
  height:22.0%;
  border:0;
  padding:0;
  background:transparent;
  border-radius:44% 44% 18% 18% / 48% 48% 16% 16%;
  cursor:pointer;
  outline:none;
}
.bonsai-opening::after{
  content:"";
  position:absolute;
  inset:4%;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(circle at 50% 65%,
    rgba(255,211,114,.12) 0%,
    rgba(255,179,58,.05) 44%,
    transparent 72%);
  box-shadow:0 0 34px rgba(255,187,60,.14);
  transition:opacity .22s ease;
  pointer-events:none;
}
.bonsai-opening:hover::after,
.bonsai-opening:focus-visible::after{opacity:1}

.bonsai-plaque{
  position:absolute;
  left:50%;
  bottom:2%;
  transform:translateX(-50%) translateY(8px);
  white-space:nowrap;
  padding:.36em .72em;
  border:1px solid rgba(222,174,77,.36);
  border-radius:6px;
  background:rgba(14,8,3,.72);
  color:#efd083;
  font:clamp(7px,.66vw,13px)/1.1 Georgia,"Times New Roman",serif;
  letter-spacing:.035em;
  text-shadow:0 1px 3px #000;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.bonsai-opening:hover .bonsai-plaque,
.bonsai-opening:focus-visible .bonsai-plaque{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.version{
  position:absolute;z-index:5;left:50%;bottom:1.2%;transform:translateX(-50%);
  font:clamp(7px,.62vw,11px)/1.2 Arial,sans-serif;letter-spacing:.08em;color:rgba(245,205,112,.50);text-shadow:0 1px 2px #000
}

/* Messaggio */
.toast{
  position:fixed;z-index:30;left:50%;bottom:18px;transform:translate(-50%,18px);
  min-width:min(420px,calc(100vw - 28px));padding:12px 17px;
  border:1px solid rgba(235,186,76,.45);border-radius:12px;background:rgba(10,6,2,.95);
  box-shadow:0 12px 42px rgba(0,0,0,.55),0 0 30px rgba(227,167,53,.10);
  color:#efd79a;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease
}
.toast strong{display:block;color:#ffd97c;font-weight:normal;font-size:1rem}
.toast span{display:block;margin-top:3px;font-size:.84rem;color:#d6bd84}
.toast.show{opacity:1;transform:translate(-50%,0)}

.mobile-scene{display:none}

/* MOBILE: layout dedicato, sempre in una schermata */
@media (max-width:760px) and (orientation:portrait){
  .desktop-scene{display:none}
  .mobile-scene{
    display:flex;position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;
    flex-direction:column;align-items:center;
    padding:max(12px,env(safe-area-inset-top)) 12px max(9px,env(safe-area-inset-bottom));
    isolation:isolate
  }
  .mobile-bg{
    position:absolute;inset:0;z-index:0;
    background:url("assets/eremo-grotta.webp") 50% 47%/cover no-repeat;
    filter:saturate(.90) brightness(.70)
  }
  .mobile-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(5,3,1,.22),rgba(5,3,1,.48)),
               radial-gradient(circle at 50% 23%,rgba(255,177,45,.10),transparent 26%)
  }
  .mobile-header,.mobile-lamp,.mobile-grid,.mobile-version{position:relative;z-index:3}
  .mobile-header{text-align:center;flex:0 0 auto}
  .mobile-title{font-size:clamp(27px,9vw,42px);letter-spacing:.06em;color:#eac15f;text-shadow:0 2px 8px #000}
  .mobile-tagline{font-size:clamp(10px,3.4vw,15px);letter-spacing:.11em;text-transform:uppercase;color:#e8cc90}
  .mobile-lamp{
    flex:0 0 auto;margin:1.4vh 0 1.1vh;width:min(74vw,330px);height:clamp(56px,10vh,78px);
    border:1px solid rgba(231,180,75,.48);border-radius:16px;background:rgba(18,10,3,.67);
    color:#f4d37f;display:flex;align-items:center;justify-content:center;gap:10px;
    font:clamp(13px,4vw,17px) Georgia,"Times New Roman",serif;
    box-shadow:0 0 24px rgba(255,174,48,.16),inset 0 0 22px rgba(255,176,51,.05)
  }
  .mobile-lamp-icon{
    font-size:clamp(27px,8vw,38px);filter:drop-shadow(0 0 8px rgba(255,190,58,.75));
    animation:mobileGlow 3.6s ease-in-out infinite
  }
  @keyframes mobileGlow{
    0%,100%{transform:scale(.96);filter:drop-shadow(0 0 6px rgba(255,190,58,.55))}
    50%{transform:scale(1.06);filter:drop-shadow(0 0 15px rgba(255,205,89,.95))}
  }
  .mobile-grid{
    width:min(94vw,440px);flex:1 1 auto;min-height:0;
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:7px
  }
  .mobile-door{
    min-width:0;min-height:0;border:1px solid rgba(220,168,68,.48);border-radius:14px 14px 7px 7px;
    background:linear-gradient(rgba(35,19,7,.79),rgba(15,8,3,.91));
    box-shadow:inset 0 0 18px rgba(0,0,0,.42);
    color:#f1d287;text-decoration:none;display:flex;align-items:center;justify-content:flex-start;
    gap:8px;padding:4px 9px;font:clamp(10px,3.45vw,15px) Georgia,"Times New Roman",serif;text-align:left
  }
  button.mobile-door{width:100%;cursor:pointer}
  .mobile-door .ico{flex:0 0 auto;width:28px;text-align:center;font-size:clamp(17px,5.2vw,24px)}
  .bonsai-mobile{border-color:rgba(228,181,81,.62)}
  .mobile-version{
    flex:0 0 auto;padding-top:.8vh;font:9px Arial,sans-serif;letter-spacing:.08em;color:rgba(241,207,128,.62)
  }
  .toast{bottom:10px}
}


/* =========================================================
   v1.3 — MOBILE FIRST HARDENING
   Priorità: smartphone, touch, orientamento e schermi bassi.
   ========================================================= */

/* Viewport moderno con fallback */
@supports (height:100dvh){
  .viewport{height:100dvh}
}

/* Tutti gli elementi interattivi rispettano una dimensione minima touch */
button,a{-webkit-tap-highlight-color:rgba(239,208,131,.16)}
.mobile-door,.mobile-lamp{touch-action:manipulation}

/* Smartphone e tablet verticali */
@media (max-width:900px) and (orientation:portrait){
  .desktop-scene{display:none!important}

  .mobile-scene{
    display:flex!important;
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    flex-direction:column;
    align-items:center;
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  .mobile-header{line-height:1.05}
  .mobile-title{font-size:clamp(26px,8.4vw,43px)}
  .mobile-tagline{margin-top:2px;font-size:clamp(9px,3vw,14px)}

  .mobile-lamp{
    width:min(78vw,340px);
    min-height:52px;
    height:clamp(54px,9.5vh,78px);
    margin:1.1vh 0 .9vh;
    padding:7px 12px;
  }

  .mobile-grid{
    width:min(96vw,470px);
    gap:clamp(5px,1.5vw,8px);
  }

  .mobile-door{
    min-height:44px;
    padding:5px 8px;
    gap:7px;
    line-height:1.08;
  }

  .mobile-door .ico{
    width:26px;
    font-size:clamp(17px,5vw,24px);
  }

  .mobile-version{
    padding-top:.45vh;
    font-size:8px;
  }
}

/* Telefoni bassi / browser con barre grandi:
   riduce il superfluo senza creare scroll */
@media (max-width:900px) and (orientation:portrait) and (max-height:700px){
  .mobile-scene{
    padding-top:max(6px,env(safe-area-inset-top));
    padding-bottom:max(5px,env(safe-area-inset-bottom));
  }

  .mobile-title{font-size:clamp(22px,7vw,32px)}
  .mobile-tagline{font-size:clamp(8px,2.6vw,11px)}
  .mobile-lamp{
    margin:.6vh 0 .6vh;
    min-height:46px;
    height:clamp(46px,8.2vh,60px);
  }
  .mobile-lamp-icon{font-size:clamp(23px,6vw,31px)}
  .mobile-grid{gap:4px}
  .mobile-door{
    min-height:40px;
    padding:3px 7px;
    font-size:clamp(9px,3vw,13px);
  }
  .mobile-door .ico{font-size:clamp(15px,4.5vw,20px)}
  .mobile-version{display:none}
}

/* Smartphone in orizzontale:
   NON usa più la miniatura desktop. Ha un layout touch dedicato. */
@media (max-height:600px) and (orientation:landscape) and (max-width:1000px){
  .desktop-scene{display:none!important}

  .mobile-scene{
    display:grid!important;
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    grid-template-columns:minmax(150px,28vw) 1fr;
    grid-template-rows:auto 1fr auto;
    column-gap:12px;
    row-gap:5px;
    align-items:stretch;
    padding:
      max(7px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left));
  }

  .mobile-header{
    grid-column:1;
    grid-row:1;
    align-self:center;
  }
  .mobile-title{font-size:clamp(22px,4.6vw,38px)}
  .mobile-tagline{font-size:clamp(8px,1.7vw,12px)}

  .mobile-lamp{
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:stretch;
    width:100%;
    height:auto;
    min-height:70px;
    margin:0;
    flex-direction:column;
    gap:2px;
    padding:7px;
    text-align:center;
    font-size:clamp(10px,1.8vw,14px);
  }
  .mobile-lamp-icon{font-size:clamp(25px,4.3vw,36px)}

  .mobile-grid{
    grid-column:2;
    grid-row:1 / span 3;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  .mobile-door{
    min-height:40px;
    padding:3px 8px;
    font-size:clamp(9px,1.75vw,13px);
  }
  .mobile-door .ico{
    width:24px;
    font-size:clamp(15px,2.8vw,20px);
  }

  .mobile-version{
    grid-column:1;
    grid-row:3;
    align-self:end;
    padding:0;
    font-size:7px;
  }
}

/* Accessibilità: chi preferisce meno movimento non subisce pulsazioni */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}