* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg: #0a0806;
  --gold: #c9943a;
  --gold2: #e8b84b;
  --rust: #8c3520;
  --parch: #d4b483;
  --ink: #f0e2c0;
  --dim: rgba(240,226,192,0.4);
  --panel: rgba(12,10,8,0.92);
}

html, body { 
    width:100%; height:100%; 
    overflow:hidden; 
    background:var(--bg); 
    color: var(--ink);
}

/* ═══ CANVAS ═══ */
#bgCanvas { position:fixed; inset:0; z-index:0; }
#particleCanvas { position:fixed; inset:0; z-index:5; pointer-events:none; }

/* ═══ SPLASH SCREEN ═══ */
/* ═══ SPLASH SCREEN ═══ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem; /* Gap leggermente ridotto per la centratura totale */
  transition: opacity 1s ease;
}

/* Contenitore specifico per Logo e Titolo */
.logo-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo-title-group img {
    margin-bottom: -35px; /* L'immagine scende sopra l'h1 */
    position: relative;
    z-index: 2; /* L'immagine sta sopra */
}

#splash h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  font-weight: 300;
  color: var(--gold);
  margin: 0;
  line-height: 0.8; /* Stringe lo spazio interno del testo */
  z-index: 1;
}

#splash h1 em {
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
}

/* Stili per i bottoni (già presenti nel tuo file) */
#startBtn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 12px 24px;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
}

#startBtn:hover {
  background: var(--gold);
  color: var(--bg);
}
/* ═══ UI PANELS ═══ */
#ui { position:fixed; inset:0; z-index:10; display:none; pointer-events:none; }
#ui.visible { display:block; }

#topbar {
  position:absolute; top:0; left:0; right:0; height:48px;
  background:var(--panel); border-bottom:1px solid rgba(201,148,58,0.15);
  display:flex; align-items:center; padding:0 1.5rem; pointer-events:all;
  backdrop-filter:blur(20px);
}

#sentPanel, #infoPanel {
  position:absolute; top:68px; width:clamp(190px, 20vw, 320px);
  background:var(--panel); border:1px solid rgba(201,148,58,0.12);
  padding:1rem; pointer-events:all; backdrop-filter:blur(20px);
}
#sentPanel { left:1.2rem; }
#infoPanel { right:1.2rem; width:clamp(200px, 22vw, 340px); }

/* Su smartphone i pannelli laterali si impilano invece di sovrapporsi al manoscritto */
@media (max-width: 640px) {
  #sentPanel, #infoPanel {
    position: absolute;
    left: 0.6rem; right: 0.6rem; width: auto;
    top: auto;
  }
  #sentPanel { top: 56px; }
  #infoPanel { top: auto; bottom: 0.6rem; }
}

/* ═══ ANIMATIONS ═══ */
.sent-track { height:3px; background:rgba(255,255,255,0.05); margin-top:5px; border-radius:2px; }
.sent-fill { height:100%; transition:width 1.5s cubic-bezier(0.4,0,0.2,1); }

.sp-ai-dot {
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 6px var(--gold); animation:dot-pulse 2s infinite;
}
@keyframes dot-pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ═══ MANUSCRIPT ═══ */
#manuscript {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(520px, 55vw); pointer-events:all; cursor:crosshair;
}
#manuscript svg { width:100%; filter:drop-shadow(0 20px 60px rgba(0,0,0,0.8)); }

/* ═══ HOTSPOTS ═══ */
.hs {
  position:absolute; width:24px; height:24px; border-radius:50%;
  border:1.5px solid; display:flex; align-items:center; justify-content:center;
  cursor:pointer; animation:hs-pulse 2.5s infinite;
}
.hs.warn { border-color:var(--rust); color:var(--rust); background:rgba(140,53,32,0.15); }
.hs.info { border-color:var(--gold); color:var(--gold); background:rgba(201,148,58,0.12); }

.hs-tip {
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:200px; background:#1a1510; border:1px solid rgba(201,148,58,0.2);
  padding:0.6rem; opacity:0; transition:opacity 0.25s; pointer-events:none;
}
.hs:hover .hs-tip { opacity:1; }

/* ═══ WAVEFORMS ═══ */
#soundPanel {
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  width:min(480px, calc(100vw - 2.4rem)); background:var(--panel); padding:0.8rem; pointer-events:all;
}
.wv-bar { width:2px; background:var(--gold); animation:wv 1.2s infinite; }
@keyframes wv { 0%,100%{transform:scaleY(0.2);} 50%{transform:scaleY(1);} }