:root{
  --bg-deep: #0b0e17;
  --bg-deep-2: #12172b;
  --gold: #f4b73f;
  --coral: #ff5d73;
  --lens-cyan: #57d9e0;
  --cream: #f6f1e7;
  --muted: #a9afc4;
  --font-display: 'Baloo 2', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
}

*{ box-sizing: border-box; }

[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: radial-gradient(circle at 50% -10%, var(--bg-deep-2), var(--bg-deep) 60%);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x: hidden;
}

#confetti-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
}

section{
  position: relative;
  z-index: 1;
  padding: 6rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- HERO ---------- */
.hero{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
}

.stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 80% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 90% 85%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,.3), transparent);
  opacity:.8;
  pointer-events:none;
}

.eyebrow{
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lens-cyan);
  margin-bottom: .5rem;
}

.big-age{
  font-family: var(--font-display);
  display:flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  line-height: .9;
}

.age-num{
  font-size: clamp(6rem, 22vw, 11rem);
  font-weight: 800;
  background: linear-gradient(180deg, var(--gold), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 30px rgba(244,183,63,.25));
}

.age-label{
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cream);
  opacity: .85;
  transform: translateY(-.6rem);
}

.name{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin: .3rem 0 0;
  color: var(--cream);
}

.hero-sub{
  color: var(--muted);
  max-width: 480px;
  margin: 1rem auto 2.5rem;
  font-size: 1.05rem;
}

.candle-btn{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bg-deep);
  background: var(--gold);
  border: none;
  padding: 1rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:.7rem;
  box-shadow: 0 10px 30px rgba(244,183,63,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.candle-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(244,183,63,.4); }
.candle-btn:active{ transform: translateY(0px) scale(.98); }

.candle-flame{
  font-size: 1.3rem;
  display:inline-block;
  transition: opacity .4s ease, transform .4s ease;
}
.candle-flame.blown{
  opacity: 0;
  transform: scale(.3) translateY(6px);
}

.hint-scroll{
  margin-top: 1.2rem;
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- MESSAGE ---------- */
.message h3{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--lens-cyan);
}
.message p{
  color: var(--cream);
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 1rem auto 2.5rem;
}
.scroll-cue{
  color: var(--coral);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(8px); }
}

/* ---------- CLUES ---------- */
.clues-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: .4rem;
}
.clues-sub{
  color: var(--muted);
  margin-bottom: 2.5rem;
}

.lens-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 640px){
  .lens-grid{ grid-template-columns: 1fr; }
}

.lens-card{
  position: relative;
  aspect-ratio: 1 / 0.85;
  border-radius: 28px;
  border: 2px solid rgba(87,217,224,.25);
  background: linear-gradient(160deg, rgba(87,217,224,.08), rgba(255,255,255,.02));
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .3s ease, transform .2s ease;
}
.lens-card:hover{ transform: translateY(-3px); border-color: rgba(87,217,224,.5); }

.lens-fog{
  position:absolute;
  inset:0;
  background: linear-gradient(160deg, rgba(169,175,196,.35), rgba(169,175,196,.15));
  backdrop-filter: blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .6s ease, backdrop-filter .6s ease;
}
.lens-fog::after{
  content: "?";
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: rgba(246,241,231,.5);
}

.lens-content{
  position: relative;
  z-index: 1;
  padding: 1.6rem;
  display:flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
}
.lens-number{
  font-family: var(--font-display);
  color: var(--gold);
  font-weight: 700;
  font-size: 1.1rem;
}
.lens-text{
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--cream);
}

.lens-card.opened .lens-fog{
  opacity: 0;
  backdrop-filter: blur(0px);
  pointer-events: none;
}
.lens-card.opened{
  border-color: rgba(244,183,63,.5);
}

.reveal-btn{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
  background: transparent;
  border: 2px solid var(--coral);
  padding: .9rem 2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
  opacity: .4;
}
.reveal-btn:not(:disabled){
  opacity: 1;
  cursor: pointer;
}
.reveal-btn:not(:disabled):hover{
  background: var(--coral);
  color: var(--bg-deep);
}
.reveal-btn:disabled{ cursor: not-allowed; }

/* ---------- REVEAL ---------- */
.reveal-section{
  padding-bottom: 8rem;
}

.glasses-wrap{
  margin-bottom: 2rem;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,1.4,.4,1);
}
.glasses-wrap.shown{
  opacity: 1;
  transform: scale(1);
}

.glasses-svg{
  width: min(420px, 80vw);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(87,217,224,.25));
}
.lens-glass{ fill: rgba(87,217,224,.18); }
.lens-rim{ fill:none; stroke: var(--cream); stroke-width: 6; }
.bridge{ stroke: var(--cream); stroke-width: 6; fill:none; }
.temple{ stroke: var(--cream); stroke-width: 6; fill:none; stroke-linecap: round; }
.cam-dot{ fill: var(--coral); }

.reveal-eyebrow{
  color: var(--lens-cyan);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.reveal-title{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin: 0 0 1rem;
}
.reveal-sub{
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 2.2rem;
  line-height: 1.6;
}

.confetti-btn{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bg-deep);
  background: linear-gradient(120deg, var(--gold), var(--coral));
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255,93,115,.3);
  transition: transform .15s ease;
}
.confetti-btn:hover{ transform: translateY(-2px); }

.footer-note{
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- ROOM 3D ---------- */
.room-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: .4rem;
}
.room-sub{
  color: var(--muted);
  margin-bottom: 1.8rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.room-wrap{
  position: relative;
  width: 100%;
  max-width: 800px;
  height: min(60vh, 520px);
  margin: 0 auto 1.8rem;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(87,217,224,.25);
  background: #0b0e17;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.room-wrap:active{ cursor: grabbing; }

#room-canvas-container{
  position: absolute;
  inset: 0;
}
#room-canvas-container canvas{
  display: block;
  width: 100%;
  height: 100%;
}

.room-loading, .room-fallback{
  position: absolute;
  inset: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.05rem;
  background: #0b0e17;
  z-index: 3;
}

.crosshair{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(246,241,231,.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.room-counter{
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11,14,23,.6);
  border: 1px solid rgba(87,217,224,.3);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: .9rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}

.door-instruction{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11,14,23,.65);
  border: 1px solid rgba(244,183,63,.4);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
  transition: opacity .4s ease;
}
.door-instruction.hidden-instruction{
  opacity: 0;
}

.fullscreen-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(87,217,224,.35);
  background: rgba(11,14,23,.6);
  color: var(--cream);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fullscreen-btn:hover{ background: rgba(87,217,224,.25); }

.room-wrap:fullscreen{
  border-radius: 0;
  max-width: 100%;
  height: 100vh;
}
.room-wrap:-webkit-full-screen{
  border-radius: 0;
  max-width: 100%;
  height: 100vh;
}

.clue-popup{
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  width: min(88%, 420px);
  background: linear-gradient(160deg, rgba(18,23,43,.95), rgba(11,14,23,.95));
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.clue-popup.shown{
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.clue-popup p{
  margin: 0 0 .8rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cream);
}
.clue-popup button{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--bg-deep);
  background: var(--gold);
  border: none;
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

.room-controls-mobile{
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  z-index: 2;
}
.room-controls-mobile.active{ display: flex; }

.dpad-row{
  display:flex;
  gap: .4rem;
}
.dpad-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(87,217,224,.35);
  background: rgba(11,14,23,.55);
  color: var(--cream);
  font-size: 1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action: none;
}
.dpad-btn:active{ background: rgba(87,217,224,.3); }

.room-debug{
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: left;
  font-family: monospace;
  font-size: .78rem;
  color: var(--lens-cyan);
  background: rgba(87,217,224,.06);
  border: 1px solid rgba(87,217,224,.2);
  border-radius: 10px;
  padding: .8rem 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
}
.room-debug:empty{ display: none; }

/* ---------- FLOATIES : cœurs, patates, estomacs sur pattes ---------- */
.floaties{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.floaty{
  position: absolute;
  bottom: -60px;
  opacity: 0;
  animation-name: floatUp;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.floaty-belly{
  width: 34px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 74'><ellipse cx='30' cy='30' rx='23' ry='27' fill='%23F4B73F'/><circle cx='22' cy='24' r='3.2' fill='%2312172B'/><circle cx='38' cy='24' r='3.2' fill='%2312172B'/><path d='M21 34 Q30 42 39 34' stroke='%2312172B' stroke-width='3' fill='none' stroke-linecap='round'/><rect x='16' y='54' width='8' height='18' rx='4' fill='%2312172B'/><rect x='36' y='54' width='8' height='18' rx='4' fill='%2312172B'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
@keyframes floatUp{
  0%{
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10%{ opacity: .85; }
  50%{
    transform: translateY(-52vh) translateX(18px) rotate(8deg);
  }
  90%{ opacity: .7; }
  100%{
    transform: translateY(-105vh) translateX(-14px) rotate(-6deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .floaty{ animation: none; opacity: .5; }
}