:root{
    --bg:#04121c;
    --panel-bg: rgba(6,20,30,0.72);
    --panel-border: rgba(120,200,220,0.25);
    --text:#e6f6fb;
    --text-dim:#9fc6d6;
    --accent:#c8faff;
    --accent-strong:#68ebff;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#0d4355;
      --panel-bg: rgba(255,255,255,0.85);
      --panel-border: rgba(50,140,150,0.25);
      --text:#0a2530;
      --text-dim:#3c6b78;
    }
  }
  :root[data-theme="dark"]{
    --bg:#04121c; --panel-bg: rgba(6,20,30,0.72); --panel-border: rgba(120,200,220,0.25);
    --text:#e6f6fb; --text-dim:#9fc6d6;
  }
  html,body{
    margin:0; padding:0; width:100%; height:100vh;
    background:var(--bg); color:var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow:hidden; overscroll-behavior:none;
     overflow-x:hidden; overflow-y:auto; 
  }

  /* Pagina leggermente più alta del viewport: serve al mini-scroll qui sotto,
     tentativo "best effort" per far minimizzare la barra di Safari all'avvio
     (funziona su versioni vecchie di iOS, su quelle recenti probabilmente no) */

 /* body{ min-height:calc(100% + 2px); }*/

  #splash-screen{
    width: 100vw;
    height: 100vh;
    position:fixed; inset:0; z-index:100;
    background:var(--bg, #04121c); display:flex; align-items:center; justify-content:center;
    transition: opacity 0.4s ease;
  }
  #splash-screen.hidden{ opacity:0; pointer-events:none; }
  #splash-screen .emoji{ font-size:54px; }
  #splash-screen>img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  #crosshair{
    position:fixed; top:50%; left:50%; width:22px; height:22px;
    transform:translate(-50%,-50%); pointer-events:none; z-index:15;
  }
  #crosshair::before, #crosshair::after{
    content:''; position:absolute; background:rgba(255,255,255,0.85);
    box-shadow:0 0 2px rgba(0,0,0,0.8);
  }
  #crosshair::before{ left:50%; top:0; width:2px; height:100%; margin-left:-1px; }
  #crosshair::after{ top:50%; left:0; height:2px; width:100%; margin-top:-1px; }
  #crosshair .dot{
    position:absolute; left:50%; top:50%; width:4px; height:4px;
    margin:-2px 0 0 -2px; border-radius:50%;
    background:rgba(255,255,255,0.95); box-shadow:0 0 2px rgba(0,0,0,0.8);
  }
  #scene-container{ position:fixed; inset:0; }
  canvas{ display:block; touch-action:none; height: 100vh; }

  #ui{
    position:fixed; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding: 16px calc(16px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    box-sizing:border-box;
    pointer-events:none;
  }
  .panel{
    pointer-events:auto;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    border-radius:14px;
    padding:12px 16px;
    max-width: 92vw;
    box-sizing:border-box;
  }
  .row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  button{
    pointer-events:auto;
    appearance:none; border:none; cursor:pointer;
    background: var(--accent);
    color:#03211c;
    font-weight:600; font-size:14px;
    padding:11px 18px; border-radius:999px;
    display:inline-flex; align-items:center; gap:6px;
    transition: transform .15s ease, background .15s ease;
  }
  button:active{ transform: scale(0.96); }
  button:disabled{ opacity:0.45; cursor:default; }

  #status{
    position:fixed; top:0; left:0; right:0;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    font-size:12px; color:var(--text-dim); text-align:center;
    pointer-events:none;
  }
  #info-box{
    text-align:center; max-width: 86vw;
  }
  #info-title{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:3px; }
  #info-text{ font-size:13px; color:var(--text-dim); line-height:1.4; }
  #big-hint{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    text-align:center; padding: 24px; box-sizing:border-box;
    background: radial-gradient(ellipse at center, rgba(4,18,28,0.2), rgba(4,18,28,0.75));
    pointer-events:none;
    z-index: 16;
  }
  #big-hint .msg{ max-width: 320px; font-size:15px; color:var(--text-dim); line-height:1.5; }
  #big-hint b{ color:var(--text); }

    #loading-overlay{
    position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
   /* background:var(--bg);*/
   background-image: url("../assets/FONTANE_Splash_anim.gif");
   background-repeat: no-repeat;
    background-size:cover;
   background-position: center;
  }
  #loading-overlay .spinner{
    width:34px; height:34px; border-radius:50%;
    border:3px solid rgba(120,200,220,0.25); border-top-color:var(--accent);
    animation: spin 0.9s linear infinite;
  }


  .container-download{
       pointer-events: auto;
    background: #468daa36;
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 16px;
    max-width: 92vw;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    bottom: 112px;
    position: fixed;
    flex-direction: column;
    align-items: center;

  }

  @keyframes spin{ to{ transform:rotate(360deg); } }
  #loading-text{ font-size:14px;   color: #b8f2fe; }
  #loading-bar-track{ width:200px; height:5px; border-radius:99px; background:rgba(120,200,220,0.18); overflow:hidden; }
  #loading-bar-fill{ height:100%; width:0%; background:var(--accent); transition: width .25s ease; }