:root{
  --panel:#fff8ec;
  --ink:#3a2c1a;
  --gold:#ffd23f;
  --gold-dark:#d69b00;
  --green:#4fbf4f;
  --pink:#ff6fa5;
  --blue:#3f8ef5;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:#0e1420;color:var(--ink);
  font-family:'Baloo 2','Comic Sans MS','Trebuchet MS','Segoe UI Rounded',sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
button{font-family:inherit;border:none;outline:none;cursor:pointer;}
.hide{display:none !important;}

#game{position:fixed;inset:0;width:100%;height:100%;display:block;}

/* ---------------- HUD ---------------- */
#hud{position:fixed;top:0;left:0;right:0;z-index:20;padding:8px;pointer-events:none;}
.hud-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,248,236,.93);
  border-radius:18px;padding:7px 12px;
  box-shadow:0 4px 0 rgba(0,0,0,.22);
  max-width:900px;margin:0 auto;pointer-events:auto;
}
.hud-left{min-width:120px;flex:1;line-height:1.15;}
.zone{font-size:clamp(12px,2.6vw,17px);font-weight:700;color:#2b5d1e;}
.stars{font-size:clamp(11px,2.3vw,15px);font-weight:700;color:#a05a00;}
.inv{display:flex;gap:4px;}
.inv .slot{
  width:clamp(24px,6.4vw,34px);height:clamp(24px,6.4vw,34px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(13px,3.4vw,19px);
  background:#eee6d2;border-radius:9px;
  filter:grayscale(1);opacity:.5;transition:all .3s;
}
.inv .slot.on{filter:none;opacity:1;background:#fff2c2;box-shadow:0 0 0 2px #ffd23f88;animation:pop .5s ease;}
@keyframes pop{0%{transform:scale(.4) rotate(-20deg);}60%{transform:scale(1.3) rotate(10deg);}100%{transform:scale(1);}}
.hud-btns{display:flex;gap:6px;}
.hbtn{
  width:clamp(30px,7vw,38px);height:clamp(30px,7vw,38px);border-radius:50%;
  font-size:clamp(14px,3.6vw,19px);background:#fff2c2;
  box-shadow:0 3px 0 #d8bd77;display:flex;align-items:center;justify-content:center;
}
.hbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #d8bd77;}

/* ---------------- PROMPT ---------------- */
#prompt{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:clamp(120px,22vh,190px);z-index:22;
  background:rgba(255,248,236,.95);color:var(--ink);
  padding:7px 16px;border-radius:30px;font-weight:700;
  font-size:clamp(13px,2.8vw,17px);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  animation:promptBob 1.2s ease-in-out infinite;white-space:nowrap;
}
@keyframes promptBob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-5px);}}
#prompt .key{
  display:inline-block;background:#3a2c1a;color:#fff;
  border-radius:6px;padding:1px 8px;margin-right:4px;font-size:.9em;
}

/* ---------------- BANNER ---------------- */
#banner{
  position:fixed;top:22%;left:50%;transform:translateX(-50%);
  z-index:30;text-align:center;pointer-events:none;width:92%;
}
.banner-main{
  font-size:clamp(20px,5.6vw,42px);font-weight:800;color:#fff;
  text-shadow:0 0 12px #ffd23f,3px 3px 0 #b45309,-1px -1px 0 #b45309;
  animation:bannerIn .5s cubic-bezier(.2,1.6,.4,1);
}
.banner-sub{
  margin-top:6px;font-size:clamp(13px,3vw,20px);font-weight:700;color:#fff;
  text-shadow:2px 2px 0 #7c2d12;
}
@keyframes bannerIn{0%{transform:scale(.3) rotate(-8deg);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* ---------------- DIÁLOGO ---------------- */
#dialog{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:12px;display:flex;justify-content:center;
}
.dialog-box{
  background:var(--panel);border-radius:20px;padding:14px 18px 30px;
  max-width:640px;width:100%;position:relative;
  box-shadow:0 6px 0 #d8bd77,0 12px 24px rgba(0,0,0,.4);
  animation:dlgIn .18s ease;
}
@keyframes dlgIn{0%{transform:translateY(20px);opacity:0;}100%{transform:none;opacity:1;}}
.dialog-who{font-weight:800;color:#c2410c;font-size:clamp(13px,3vw,18px);margin-bottom:2px;}
.dialog-text{font-size:clamp(14px,3.2vw,19px);line-height:1.35;white-space:pre-line;}
.dialog-next{position:absolute;right:16px;bottom:8px;color:#c2410c;font-size:18px;animation:nextBob .8s infinite;}
@keyframes nextBob{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* ---------------- TÁCTIL ---------------- */
#touch{position:fixed;inset:0;z-index:25;pointer-events:none;}
#joy{
  position:absolute;left:16px;bottom:16px;width:130px;height:130px;border-radius:50%;
  background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.5);
  pointer-events:auto;touch-action:none;
}
#joyStick{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
#actBtn{
  position:absolute;right:18px;bottom:34px;width:86px;height:86px;border-radius:50%;
  background:rgba(255,210,63,.92);color:#5a3a00;font-size:30px;font-weight:800;
  box-shadow:0 5px 0 #c98f00;pointer-events:auto;
}
#actBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #c98f00;}

/* ---------------- INICIO ---------------- */
#startScreen{
  position:fixed;inset:0;z-index:60;overflow:auto;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:
    radial-gradient(circle at 18% 22%,#fff6c7 0,transparent 42%),
    radial-gradient(circle at 84% 16%,#ffd9ec 0,transparent 46%),
    linear-gradient(180deg,#9fe0ff 0,#d8f7ff 55%,#eafff0 100%);
}
.start-inner{max-width:560px;}
.hero-noah{width:130px;height:150px;margin:0 auto 6px;animation:bob 2.2s ease-in-out infinite;}
.hero-noah canvas{width:100%;height:100%;image-rendering:auto;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
#startScreen h1{
  margin:0 0 8px;font-size:clamp(34px,9vw,64px);color:#2b5d1e;line-height:.95;
  text-shadow:3px 3px 0 #fffc,0 6px 0 #ffffff66;letter-spacing:1px;
}
#startScreen h1 span{font-size:.42em;color:#c2410c;letter-spacing:0;}
.start-sub{
  background:#fffdf5cc;padding:12px 18px;border-radius:18px;
  font-size:clamp(14px,3.2vw,18px);box-shadow:0 5px 0 #e8dcc0;margin:0 0 20px;
}
#startBtn{
  font-size:clamp(19px,4.6vw,28px);font-weight:800;padding:15px 32px;border-radius:50px;
  background:linear-gradient(180deg,#ffe27a,var(--gold));color:#5a3a00;
  box-shadow:0 8px 0 var(--gold-dark),0 12px 20px rgba(0,0,0,.2);
}
#startBtn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--gold-dark);}
.controls-help{font-size:clamp(11px,2.6vw,14px);color:#4a3b26;margin-top:18px;line-height:1.6;}

/* ---------------- OVERLAYS ---------------- */
.overlay{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(16,20,36,.72);overflow:auto;
}
.panel{
  background:var(--panel);border-radius:24px;padding:22px 20px;text-align:center;
  max-width:520px;width:100%;position:relative;z-index:2;
  box-shadow:0 8px 0 #d8bd77,0 18px 36px rgba(0,0,0,.4);
  max-height:94vh;overflow:auto;
}
.panel h2{margin:0 0 12px;font-size:clamp(19px,4.4vw,28px);color:#c2410c;}
.big-btn{
  font-size:clamp(14px,3.2vw,18px);font-weight:800;padding:12px 20px;border-radius:40px;
  box-shadow:0 5px 0 rgba(0,0,0,.2);margin:6px 4px 0;
}
.big-btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.2);}
.big-btn.close{background:#e7ddc6;color:#5a4a2a;}
.big-btn.again{background:linear-gradient(180deg,#8ee08a,var(--green));color:#0d3a0d;}
.big-btn.explore{background:linear-gradient(180deg,#9fd8ff,#3f8ef5);color:#06305e;}

/* mapa del mundo */
.wm-list{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.wm-item{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:9px 13px;border-radius:14px;background:#eee6d2;
  font-size:clamp(13px,3vw,17px);font-weight:700;color:#8a7a5a;
  box-shadow:0 3px 0 #d8cbaa;
}
.wm-item .em{font-size:1.4em;filter:grayscale(1);}
.wm-item.on{background:#fff2c2;color:#5a3a00;cursor:pointer;}
.wm-item.on .em{filter:none;}
.wm-item.on:active{transform:translateY(2px);box-shadow:0 1px 0 #d8cbaa;}
.wm-item.here{background:#bff0a8;color:#204d10;box-shadow:0 3px 0 #8cc973;}
.wm-arrow{color:#c9b98f;font-size:14px;line-height:.4;}

/* victoria */
.victory-panel{overflow:visible;}
.vic-stage{
  position:relative;height:250px;margin-bottom:4px;
  display:flex;align-items:center;justify-content:center;
}
.vic-noah{width:104px;height:124px;animation:bob 1.6s ease-in-out infinite;}
.vic-noah canvas{width:100%;height:100%;}
.vic-ring{position:absolute;left:50%;top:50%;width:0;height:0;}
.vic-ring span{
  position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(23px,5vw,32px);
  animation:orbit 7s linear infinite;
}
@keyframes orbit{
  from{transform:rotate(0deg) translateX(var(--r)) rotate(0deg);}
  to{transform:rotate(360deg) translateX(var(--r)) rotate(-360deg);}
}
.legend{font-weight:800;color:#c2410c;font-size:clamp(15px,3.4vw,21px);margin:10px 0 4px;}
.vic-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.confetti{
  position:fixed;top:-8%;width:11px;height:16px;z-index:75;pointer-events:none;
  animation:fall linear forwards;
}
@keyframes fall{to{transform:translateY(118vh) rotate(var(--rot));}}

/* fundido de transición */
#fade{
  position:fixed;inset:0;z-index:50;background:#000;opacity:0;
  pointer-events:none;transition:opacity .28s linear;
}
#fade.on{opacity:1;}

@media (max-width:760px){
  #prompt{bottom:168px;}
}

/* ---------------- ACERTIJOS ---------------- */
#puzzle{z-index:80;}
.pz-panel{max-width:560px;}
.pz-sub{font-size:clamp(13px,3vw,17px);margin:0 0 14px;}
.pz-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0;}
.pz-btn{
  font-size:clamp(16px,4vw,22px);font-weight:800;padding:12px 18px;border-radius:16px;
  background:#fff2c2;color:#5a3a00;box-shadow:0 4px 0 #d8bd77;min-width:64px;
  transition:transform .1s;
}
.pz-btn.big{font-size:clamp(26px,7vw,40px);padding:10px 16px;line-height:1.1;}
.pz-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d8bd77;}
.pz-btn.ok{background:#bff0a8;box-shadow:0 4px 0 #8cc973;}
.pz-btn.lit{background:#fff59d;box-shadow:0 0 0 4px #ffe066,0 4px 0 #d8bd77;transform:scale(1.1);}
.pz-btn.star{font-size:clamp(30px,8vw,46px);}
.pz-prog{font-size:clamp(18px,4vw,26px);letter-spacing:6px;min-height:32px;}
.pz-slots{display:flex;gap:8px;justify-content:center;margin:10px 0;}
.pz-slot{
  width:clamp(46px,12vw,64px);height:clamp(46px,12vw,64px);border-radius:12px;
  background:#eee6d2;border:3px dashed #c9b98f;color:#a89a78;
  display:flex;align-items:center;justify-content:center;font-size:clamp(22px,6vw,32px);font-weight:800;
}
.pz-hint{margin-top:10px;font-size:clamp(12px,2.8vw,15px);color:#7a4a1e;background:#fff6d8;
  padding:8px 12px;border-radius:12px;}
.pz-win{
  margin-top:14px;font-size:clamp(18px,4.4vw,26px);font-weight:800;color:#2b7d1e;
  animation:pop .5s ease;
}
.shake{animation:shk .4s;}
@keyframes shk{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}40%{transform:translateX(9px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}
/* mapa roto 2x2 */
.pz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:min(300px,74vw);margin:14px auto;}
.pz-piece{
  aspect-ratio:1;border-radius:10px;cursor:pointer;background-size:200% 200%;
  box-shadow:0 3px 0 rgba(0,0,0,.2);border:3px solid transparent;
  background-image:linear-gradient(135deg,#e8c98a 0%,#d8b46a 100%);
  position:relative;overflow:hidden;
}
.pz-piece::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 40%,#7ec850 0 18%,transparent 19%),
    radial-gradient(circle at 70% 70%,#5fa8e0 0 22%,transparent 23%),
    linear-gradient(90deg,transparent 46%,#a0703c 46% 54%,transparent 54%);
  background-size:200% 200%;
}
.pz-piece.p0::after{background-position:0% 0%;}
.pz-piece.p1::after{background-position:100% 0%;}
.pz-piece.p2::after{background-position:0% 100%;}
.pz-piece.p3::after{background-position:100% 100%;}
.pz-piece.sel{border-color:#ffd23f;transform:scale(.94);}
/* rayo de luz */
.pz-light{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0;}
.pz-sun,.pz-door{font-size:clamp(26px,7vw,38px);}
.pz-btn.crystal{min-width:auto;padding:8px 10px;font-size:clamp(24px,6vw,34px);}