*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --tf:#5DC4A8;--tf-l:#9DDECA;--tf-d:#3A9A80;--tf-p:#E0F5EF;
  --wh:#FFFDF9;--cr:#FDF6EE;
  --tc:#C4754A;--tc-l:#E8A07A;--tc-p:#FAE8DC;--tc-d:#9A4F2A;
  --gd:#D4AF6A;--gd-l:#EDD89A;
  --tx:#3A2520;--tx-m:#7A5048;--tx-l:#AA8070;
  --sd:0 4px 24px rgba(60,30,20,.12);
  --pv:#C070E0;--pv-d:#8B35B0;--pv-l:#E0B0FF;--pv-p:#F5EAFF;
}

html,body{height:100%;font-family:'Nunito',sans-serif;background:var(--cr);color:var(--tx);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── SCREENS ──────────────────────────────── */
.screen{display:none;min-height:100dvh;flex-direction:column;align-items:center}
.screen.active{display:flex}

/* ══ BIENVENIDA ═══════════════════════════ */
#screen-welcome{
  background:linear-gradient(160deg,#F0E6FF 0%,#FDF8F2 45%,#FFE8F5 100%);
  justify-content:center;padding:40px 24px 48px;
  text-align:center;position:relative;overflow:hidden;
}
.welcome-petals{font-size:32px;letter-spacing:8px;margin-bottom:28px;opacity:.85;animation:petal-sway 3.5s ease-in-out infinite alternate}
@keyframes petal-sway{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.welcome-month{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--pv);font-weight:700;margin-bottom:14px}
.welcome-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,9vw,54px);font-weight:600;line-height:1.08;color:var(--tx);margin-bottom:10px}
.welcome-title em{color:var(--pv-d);font-style:italic}
.welcome-sub{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:var(--tx-m);line-height:1.55;max-width:300px;margin:0 auto 20px}
.welcome-divider{width:64px;height:1px;margin:0 auto 22px;background:linear-gradient(to right,transparent,var(--pv),transparent)}
.welcome-body{font-size:14px;line-height:1.75;color:var(--tx-m);max-width:288px;margin:0 auto 36px}

.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:32px;font-family:'Nunito',sans-serif;font-weight:800;cursor:pointer;transition:transform .14s,box-shadow .14s;text-decoration:none}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--pv),var(--pv-d));color:#fff;padding:14px 36px;font-size:15px;box-shadow:0 6px 22px rgba(180,100,220,.38);width:100%;max-width:280px}
.btn-ghost{background:transparent;color:var(--tx-m);border:1.5px solid rgba(120,80,160,.25);padding:11px 28px;font-size:13px;width:100%;max-width:280px}
.btn-ghost:active{background:rgba(180,100,220,.07)}
.welcome-buttons{display:flex;flex-direction:column;align-items:center;gap:12px}

.hearts-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.h-float{position:absolute;animation:hf var(--d) ease-in-out infinite;opacity:0}
@keyframes hf{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.4;transform:translateY(-20px) scale(1)}80%{opacity:.2}100%{transform:translateY(-70px) scale(.5);opacity:0}}

/* ══ JUEGO ════════════════════════════════ */
#screen-game{background:var(--cr);justify-content:flex-start;width:100%}

.game-header{
  width:100%;background:linear-gradient(135deg,rgba(248,236,255,.98),rgba(255,248,254,.98));
  border-bottom:1px solid rgba(180,100,220,.18);
  padding:10px 12px;display:flex;align-items:center;gap:8px;
  box-shadow:0 2px 12px rgba(180,100,220,.1);position:sticky;top:0;z-index:10;flex-shrink:0;
}
.gh-title{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--tx);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-doors{font-size:11px;font-weight:700;color:var(--pv-d);white-space:nowrap;background:var(--pv-p);padding:4px 9px;border-radius:20px}
.gh-btn{background:rgba(180,100,220,.12);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:background .15s,transform .12s;flex-shrink:0;color:var(--tx-m);font-family:'Nunito',sans-serif;font-weight:700;text-decoration:none}
.gh-btn:active{background:rgba(180,100,220,.25);transform:scale(.92)}
.gh-btn.restart,.gh-btn.back{font-size:12px;width:auto;border-radius:20px;padding:0 10px;height:34px}

.game-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 16px 14px;width:100%;gap:10px;overflow:hidden}

#maze-canvas{display:block;border-radius:14px;box-shadow:0 4px 28px rgba(120,40,180,.28),0 0 0 2px rgba(192,112,224,.30);flex-shrink:0}

/* Leyenda del laberinto */
.maze-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  width:100%;max-width:360px;
  background:rgba(245,234,255,0.82);
  border:1px solid rgba(192,112,224,0.28);
  border-radius:20px;
  padding:5px 14px;
  font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;
  color:var(--tx-m);flex-shrink:0;
}
.maze-legend span{white-space:nowrap}

/* HUD de ítems */
.items-hud{
  width:100%;max-width:460px;text-align:center;
  font-size:11px;color:var(--tx-m);padding:0 8px;
  line-height:1.5;flex-shrink:0;min-height:16px;
}
.items-label{font-weight:700;color:var(--pv-d)}

/* Controles táctiles */
.touch-controls{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,50px);gap:5px;flex-shrink:0}
.tc-btn{background:rgba(255,255,255,.9);border:1.5px solid rgba(180,100,220,.25);border-radius:14px;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(60,30,20,.08);transition:background .12s,transform .1s;user-select:none;-webkit-user-select:none}
.tc-btn:active{background:var(--pv-p);transform:scale(.9);border-color:var(--pv)}
.tc-empty{visibility:hidden}

/* ══ PANTALLA FINAL ════════════════════════ */
#screen-final{
  background:linear-gradient(160deg,#EEE2FF 0%,#FDF8F2 48%,#FFE6F5 100%);
  justify-content:flex-start;padding:44px 20px 60px;
  overflow-y:auto;position:relative;
}
.final-ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;display:none}

.final-header{text-align:center;margin-bottom:22px;position:relative;z-index:2}
.final-big-icon{
  font-size:62px;margin-bottom:14px;display:block;
  animation:final-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes final-pop{from{transform:scale(0) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.final-big-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,7vw,42px);font-weight:600;
  color:var(--tx);line-height:1.1;margin-bottom:8px;
}
.final-big-title em{color:var(--pv-d);font-style:italic}
.final-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;font-style:italic;color:var(--tx-m);margin-bottom:16px;
}
.final-sep{width:56px;height:1px;margin:0 auto;background:linear-gradient(to right,transparent,var(--pv),transparent)}

/* Carta */
.letter-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(192,112,224,.22);
  border-radius:22px;
  padding:28px 24px 32px;
  max-width:400px;width:100%;
  box-shadow:0 6px 32px rgba(140,60,200,.12),0 0 0 1px rgba(255,255,255,.8);
  margin-bottom:26px;position:relative;z-index:2;
  animation:card-rise .85s .25s cubic-bezier(.2,.9,.4,1) both;
}
@keyframes card-rise{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}

.letter-deco{text-align:center;font-size:24px;letter-spacing:8px;margin-bottom:18px;opacity:.7}
.letter-salute{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--tx);margin-bottom:18px}
.letter-para{font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.82;color:var(--tx-m);margin-bottom:15px}
.letter-closing{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--tx);margin-top:22px;margin-bottom:8px}
.letter-sign{font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;color:var(--pv-d);line-height:1.6}

.final-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:2}

/* ══ MODAL DE PREGUNTA ════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(50,10,70,.52);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.active{display:flex}
.modal-card{
  background:linear-gradient(160deg,#FDFAFF 0%,#F4E8FF 100%);
  border:1.5px solid rgba(192,112,224,.35);border-radius:26px;
  padding:26px 22px 22px;max-width:360px;width:100%;
  max-height:90dvh;overflow-y:auto;
  box-shadow:0 16px 56px rgba(90,10,140,.22),0 0 0 1px rgba(255,255,255,.7);
}
.modal-eyebrow{font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:var(--pv);font-weight:700;text-align:center;margin-bottom:10px}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:600;color:var(--tx);text-align:center;line-height:1.18;margin-bottom:12px}
.modal-sep{width:44px;height:1px;margin:0 auto 14px;background:linear-gradient(to right,transparent,var(--pv),transparent)}
.modal-question{font-size:15px;line-height:1.65;color:var(--tx-m);text-align:center;margin-bottom:20px}
.modal-options{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.opt-btn{
  background:rgba(255,255,255,.88);border:1.5px solid rgba(180,100,220,.2);border-radius:16px;
  padding:12px 14px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;
  color:var(--tx);cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s,transform .1s;
  display:flex;align-items:center;gap:10px;width:100%;line-height:1.4;
}
.opt-btn:active{transform:scale(.98)}
.opt-btn:not(:disabled):hover{background:var(--pv-p);border-color:rgba(180,100,220,.45)}
.opt-btn:disabled{cursor:default}
.opt-btn.correct{background:linear-gradient(135deg,rgba(61,154,128,.12),rgba(93,196,168,.08));border-color:#5DC4A8;color:var(--tf-d)}
.opt-btn.wrong{background:rgba(200,50,50,.07);border-color:rgba(200,50,50,.28);color:#922}
.opt-label{min-width:24px;height:24px;border-radius:50%;background:var(--pv-p);border:1.5px solid rgba(180,100,220,.3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--pv-d);flex-shrink:0}
.opt-btn.correct .opt-label{background:rgba(93,196,168,.2);border-color:var(--tf);color:var(--tf-d)}
.opt-btn.wrong .opt-label{background:rgba(200,50,50,.1);border-color:rgba(200,50,50,.3);color:#922}
.modal-feedback{min-height:22px;font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;text-align:center;line-height:1.5;color:var(--tx-m);margin-bottom:14px}
.modal-feedback.error{color:#993333}
.modal-feedback.success{color:var(--tf-d)}
.btn-modal-close{display:block;margin:0 auto;background:transparent;border:1.5px solid rgba(120,80,160,.2);border-radius:20px;padding:8px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--tx-l);cursor:pointer;transition:background .15s}
.btn-modal-close:hover{background:rgba(180,100,220,.08)}
.btn-modal-close:active{transform:scale(.97)}

/* ── TOAST ───────────────────────────────── */
.toast{
  position:fixed;bottom:100px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:linear-gradient(135deg,var(--pv),var(--pv-d));
  color:#fff;padding:13px 22px;border-radius:32px;
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;
  box-shadow:0 8px 28px rgba(180,100,220,.45);
  z-index:300;text-align:center;
  width:calc(100% - 40px);max-width:320px;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Secret path toast variant */
.toast.secret{
  background:linear-gradient(135deg,#D080FF,#8B35B0);
  box-shadow:0 8px 32px rgba(140,60,220,.55);
}

/* ── SPARKS ──────────────────────────────── */
#sparks{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.spark{position:absolute;width:5px;height:5px;background:var(--pv-l);border-radius:50%;animation:spark-fl var(--d) ease-in-out infinite;opacity:0}
@keyframes spark-fl{0%{transform:translateY(0) scale(0);opacity:0}20%{opacity:.5;transform:translateY(-18px) scale(1)}80%{opacity:.25}100%{transform:translateY(-55px) scale(0);opacity:0}}