/* ─── RESET & BASE ─────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg:        #0A0018;
  --pink1:     #FF6B9D;
  --pink2:     #FF99BB;
  --pink3:     #FFBBCC;
  --dark-pink: #CC3377;
  --white:     #FFFFFF;
  --fl-o:      #FF8C00;
  --fl-y:      #FFEE00;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Press Start 2P', 'Courier New', monospace;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

/* ─── ESTRELLAS ─────────────────────────────────────── */
#stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── PANTALLA PRINCIPAL ────────────────────────────── */
#main-screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  min-height: 100dvh;
  min-height: 100vh;
  padding: 12px 8px;
  gap: 6px;
}

/* ─── TÍTULO ────────────────────────────────────────── */
#top-title {
  font-size: clamp(10px, 3.5vw, 16px);
  color: var(--pink1);
  text-align: center;
  line-height: 1.7;
  text-shadow:
    2px 2px 0 #880033,
    0 0 12px var(--pink1),
    0 0 28px var(--pink1);
  letter-spacing: 1px;
}

/* ─── ESCENA DEL PASTEL ─────────────────────────────── */
#cake-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── FILA DE VELAS ─────────────────────────────────── */
#candles-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 5;
}

.candle-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ─── LLAMA ─────────────────────────────────────────── */
.flame-wrap {
  position: relative;
  width: 14px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.flame {
  width: 14px;
  height: 22px;
  position: relative;
  animation: flicker 250ms ease-in-out infinite alternate;
  transform-origin: bottom center;
  transition: opacity 0.4s;
}

.flame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fl-o);
  clip-path: polygon(50% 0%, 88% 32%, 100% 62%, 78% 100%, 22% 100%, 0% 62%, 12% 32%);
}

.flame::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 13px;
  background: var(--fl-y);
  clip-path: polygon(50% 0%, 92% 42%, 76% 100%, 24% 100%, 8% 42%);
}

@keyframes flicker {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-3deg); filter: brightness(1);   }
  33%  { transform: scaleX(0.85) scaleY(1.12) rotate(2deg);  filter: brightness(1.2); }
  66%  { transform: scaleX(1.1)  scaleY(0.9)  rotate(-1deg); filter: brightness(0.9); }
  100% { transform: scaleX(0.95) scaleY(1.06) rotate(3deg);  filter: brightness(1.1); }
}

/* ─── HUMO ──────────────────────────────────────────── */
.smoke {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 22px;
  background: linear-gradient(to top, rgba(200,200,200,0.75), transparent);
  animation: smoke-rise 1.4s ease-out infinite;
}

@keyframes smoke-rise {
  0%   { transform: translateX(-50%) translateY(0)     scaleX(1);   opacity: 0.75; }
  100% { transform: translateX(-50%) translateY(-28px) scaleX(2.5); opacity: 0;    }
}

/* ─── PALO DE VELA ──────────────────────────────────── */
.candle-stick {
  width: 14px;
  height: 44px;
  position: relative;
  border-width: 0 2px 2px 2px;
  border-style: solid;
}

.candle-stick::after {
  content: '';
  position: absolute;
  top: 0;
  right: 3px;
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.22);
}

.c-yellow { background: #FFD700; border-color: #AA8800; }
.c-red    { background: #FF4040; border-color: #880000; }
.c-cyan   { background: #00DDFF; border-color: #007799; }
.c-lime   { background: #44FF44; border-color: #007722; }
.c-purple { background: #CC55FF; border-color: #6600AA; }

/* ─── CUERPO DEL PASTEL ─────────────────────────────── */
#cake-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tier {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ─── BETÚN (FROSTING) ──────────────────────────────── */
.frosting {
  background: var(--white);
  height: 8px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.drip {
  width: 10px;
  height: 14px;
  background: var(--white);
  margin-top: 6px;
}

/* ─── RELLENO DE PISO ───────────────────────────────── */
.tier-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  gap: 0;
  position: relative;
  border-left:   4px solid var(--dark-pink);
  border-right:  4px solid var(--dark-pink);
  border-bottom: 4px solid var(--dark-pink);
}

.tier-hl {
  position: absolute;
  top: 0;
  left: 6px;
  width: 6px;
  height: 100%;
  background: rgba(255,255,255,0.18);
  pointer-events: none;
}

.tier-dots {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
}

.d-red    { background: #CC0033; }
.d-white  { background: #FFFFFF; }
.d-yellow { background: #FFD700; }

/* ─── TAMAÑOS DE CADA PISO ──────────────────────────── */
.t1 { width: 128px; }
.t1 .tier-fill { height: 52px; background: var(--pink1); }

.t2 { width: 184px; }
.t2 .tier-fill { height: 60px; background: var(--pink2); }

.t3 { width: 248px; }
.t3 .tier-fill { height: 68px; background: var(--pink3); }

/* ─── PLATO ─────────────────────────────────────────── */
#plate {
  width: 276px;
  height: 12px;
  background: #DDCCFF;
  border: 3px solid #9966CC;
  border-top: none;
}

/* ─── CONTROLES ─────────────────────────────────────── */
#controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

#mic-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 3vw, 14px);
  padding: 12px 20px;
  background: var(--pink1);
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 4px 4px 0 var(--dark-pink);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  letter-spacing: 1px;
}

#mic-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

#meter-wrap {
  width: 200px;
  height: 14px;
  border: 3px solid #fff;
  background: #1a0033;
}

#meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #44FF44, #FFFF00, #FF2200);
  transition: width 0.05s linear;
}

/* ─── TEXTO SOPLA ───────────────────────────────────── */
#sopla-label {
  font-size: clamp(14px, 5vw, 22px);
  color: #FFFF44;
  text-shadow: 2px 2px 0 #FF4400, 0 0 16px #FFFF44;
  animation: blink-step 0.55s step-end infinite;
}

@keyframes blink-step {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── PANTALLA DE CELEBRACIÓN ───────────────────────── */
#celebration {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  overflow: hidden;
}

/* ─── PÁGINA 1: FUEGOS + TEXTO ──────────────────────── */
#celeb-p1 {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg);
  gap: 22px;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#celeb-p1.slide-out {
  transform: translateY(-100%);
}

#fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ─── TEXTO CELEBRACIÓN ─────────────────────────────── */
#celeb-text {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cl {
  display: block;
  font-size: clamp(22px, 8vw, 38px);
  color: #FFD700;
  text-shadow:
    3px 3px 0 #CC4400,
    6px 6px 0 #880022;
  line-height: 1.9;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  animation: line-in 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

.sofia {
  font-size: clamp(28px, 10vw, 48px) !important;
  color: #FF6BFF !important;
  text-shadow:
    3px 3px 0 #880088,
    6px 6px 0 #440044,
    0 0 24px #FF44FF !important;
}

.cl1 { animation-delay: 0.3s; }
.cl2 { animation-delay: 0.7s; }
.cl3 { animation-delay: 1.1s; }
.cl4 { animation-delay: 1.5s; }

@keyframes line-in {
  0%   { opacity: 0; transform: translateY(16px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.06);  }
  100% { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* ─── FLECHA 8-BIT ──────────────────────────────────── */
#arrow-down {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  animation: arr-bounce 0.75s ease-in-out infinite alternate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@keyframes arr-bounce {
  0%   { transform: translateY(-4px); }
  100% { transform: translateY(6px);  }
}

.arr-tip {
  font-size: 7px;
  color: rgba(255,180,220,0.6);
  letter-spacing: 1px;
}

.pix-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pa-r {
  height: 8px;
  background: #FF6B9D;
  box-shadow: 2px 2px 0 #880044, 0 0 8px #FF6B9D;
}
.pa-r1 { width: 44px; }
.pa-r2 { width: 30px; }
.pa-r3 { width: 16px; }
.pa-r4 { width:  8px; }

/* ─── PÁGINA 2: NOTA ROMÁNTICA ──────────────────────── */
#love-page {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #120008;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 0;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

#love-page.slide-in {
  transform: translateY(0);
}

#love-hearts-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

@keyframes float-heart {
  0%   { transform: translateY(0)     scale(1)    rotate(-8deg); }
  100% { transform: translateY(-18px) scale(1.08) rotate(8deg);  }
}

/* ─── NOTA / CARTA ──────────────────────────────────── */
#love-note {
  position: relative;
  z-index: 5;
  max-width: 340px;
  width: 90%;
  padding: 30px 22px 26px;
  background: rgba(20, 0, 12, 0.94);
  border: 3px solid #FF6B9D;
  box-shadow:
    4px 4px 0 #880033,
    0 0 28px rgba(255,107,157,0.22),
    inset 0 0 20px rgba(255,107,157,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* aparece con animación al bajar */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

#love-note.note-visible {
  opacity: 1;
  transform: translateY(0);
}

.note-corner {
  position: absolute;
  font-size: 11px;
  color: #FF6B9D;
  opacity: 0.55;
  line-height: 1;
}
.nc-tl { top: 8px;    left: 10px;  }
.nc-tr { top: 8px;    right: 10px; }
.nc-bl { bottom: 8px; left: 10px;  }
.nc-br { bottom: 8px; right: 10px; }

/* ─── CORAZÓN GRANDE ────────────────────────────────── */
#big-heart {
  font-size: 72px;
  line-height: 1;
  color: #FF0044;
  text-shadow:
    0 0 10px #FF0044,
    0 0 24px #FF2244,
    0 0 48px rgba(255,68,102,0.45),
    3px 3px 0 #660022;
  animation: hbeat 0.9s ease-in-out infinite alternate;
}

@keyframes hbeat {
  0%   { transform: scale(1);    filter: brightness(1);   }
  100% { transform: scale(1.1);  filter: brightness(1.25);}
}

/* ─── TEXTO DE LA NOTA ──────────────────────────────── */
#note-text {
  font-size: clamp(7px, 2.3vw, 9px);
  color: #FFD4E8;
  line-height: 2.4;
  text-align: center;
  text-shadow: 1px 1px 0 #660033;
  width: 100%;
}

.note-gap { display: block; height: 8px; }

/* ─── SEPARADOR PUNTEADO 8-BIT ──────────────────────── */
.pix-sep {
  width: 78%;
  height: 3px;
  background: repeating-linear-gradient(
    to right,
    #FF6B9D 0px,
    #FF6B9D 8px,
    transparent 8px,
    transparent 13px
  );
  opacity: 0.6;
}

/* ─── FIRMA ─────────────────────────────────────────── */
#note-sig {
  font-size: clamp(9px, 3vw, 13px);
  color: #FF6B9D;
  text-shadow:
    2px 2px 0 #880033,
    0 0 14px #FF6B9D;
}

/* ─── UTILIDADES ────────────────────────────────────── */
.hidden {
  display: none !important;
}