html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:black;
  font-family:'Press Start 2P', monospace;
}

/* =====================
   Scène principale
===================== */
.scene{
  position:fixed;
  inset:0;
}

/* =====================
   Backgrounds
===================== */
.bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity 1.2s ease;
}

#bgNight{ opacity:1; }
#bgDay{ opacity:0; }

/* =====================
   Lampe – Desktop (base)
===================== */
.lamp{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  max-width:60vw;
  image-rendering:pixelated;
  cursor:pointer;
  z-index:5;
}

/* Très grands écrans */
@media (min-width:1600px){
  .lamp{
    width:240px;
  }
}

/* Laptop standard */
@media (max-width:1400px){
  .lamp{
    width:220px;
  }
}

/* Tablette large */
@media (max-width:1200px){
  .lamp{
    width:200px;
  }
}

/* Tablette standard */
@media (max-width:1024px){
  .lamp{
    width:180px;
  }
}

/* Tablette portrait */
@media (max-width:900px){
  .lamp{
    width:190px;
  }
}

/* Mobile large */
@media (max-width:768px){
  .lamp{
    width:160px;
  }
}

/* Mobile moyen */
@media (max-width:600px){
  .lamp{
    width:170px;
  }
}

/* Petit mobile */
@media (max-width:480px){
  .lamp{
    width:180px;
  }
}

/* Très petit mobile */
@media (max-width:360px){
  .lamp{
    width:105px;
  }
}

/* =====================
   Texte d’introduction
===================== */
.quote{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  font-size:clamp(16px, 2vw, 28px);
  line-height:1.8;
  letter-spacing:2px;
  color:rgba(255,255,255,0.9);
  z-index:7;
  pointer-events:none;
  transition:opacity 0.6s ease;
}

.quote span{
  display:inline-block;
  margin:0 6px;
  transition:opacity 0.2s ease;
}

/* =====================
   Lumière principale
===================== */
.light{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    ellipse at 50% 12%,
    rgba(255,220,150,0.55),
    rgba(0,0,0,0.9) 75%
  );
  opacity:0;
  transition:opacity 1.2s ease;
  z-index:4;
}

/* Lumière du curseur */
.cursor-light{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(
    circle 160px at var(--x) var(--y),
    rgba(255,255,200,0.35),
    rgba(0,0,0,0.98)
  );
  z-index:6;
}

/* Mobile : désactive lumière curseur */
@media (max-width:768px){
  .cursor-light{
    display:none !important;
  }
}

/* =====================
   Hotspots
===================== */
.hotspot{
  position:absolute;
  z-index:9;
  background:transparent;
  pointer-events:none;
  cursor:pointer;
}

.light-on .hotspot{
  pointer-events:auto;
}

.light-on .hotspot::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:60%;
  height:110%;
  z-index:100;
  background:url("../assets/gifs/UNDERTALE2.gif") center / contain no-repeat;
  opacity:1;
  transition:opacity 0.25s ease, transform 0.35s ease;
  pointer-events:none;
}

.light-on .hotspot:hover::after{
  opacity:0.4;
  transform:translate(-50%, -44%) scale(0.88);
}

/* =====================
   Overlays généraux
===================== */
.overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  pointer-events:none;
}

.overlay.active{
  display:block;
}

.overlay .window,
.overlay .phone-window{
  position:fixed;
  z-index:21;
  pointer-events:auto;
}

/* =====================
   Notification bienvenue
===================== */
#welcomeOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.light-on #welcomeOverlay{
  display:flex !important;
}

#welcomeBox{
  position:relative;
  width:720px;
  max-width:90vw;
  padding:40px 48px;
  background:white;
  border:4px solid #150474e0;
  border-radius:8px;
  font-size:14px;
  line-height:2;
  color:#000;
}

#welcomeClose{
  position:absolute;
  top:3px;
  right:6px;

  width:30px;
  height:30px;

  background:red;
  color:#fff;
  border:none;
  border-radius:10%;

  font-size:18px;
  font-weight:bold;
  font-family:inherit;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:999;

  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}


.welcome-hidden #welcomeOverlay{
  display:none !important;
}