/* Reset base */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0}
[hidden]{display:none!important}

/* Layout: mundo en canvas a pantalla completa; HUD flotante en esquinas; diálogo anclado abajo como en un RPG de bolsillo */
:root{
  --ink:#2a1b2d; --paper:#fff8ee; --paper-2:#f3e4cf; --magenta:#c2187a; --magenta-2:#8e0f58;
  --sun:#ffb627; --muted:#6f5b66; --line:#e2cfb6;
  --display:'Fredoka',ui-rounded,'Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--ink);color:var(--ink);font-family:var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
canvas{position:fixed;inset:0;display:block;touch-action:none;outline:none}
button{font-family:var(--body);cursor:pointer}
button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

#mission{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));
  background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:10px 12px 10px;max-width:min(260px,calc(100vw - 32px));
  box-shadow:0 4px 0 var(--ink);font-size:13px;line-height:1.35}
#mission .ch{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--magenta);margin-bottom:6px}
#steps{margin:0;padding:0;list-style:none;display:grid;gap:5px;counter-reset:s}
#steps li{counter-increment:s;display:grid;grid-template-columns:20px 1fr;gap:6px;align-items:start;font-weight:700}
#steps li::before{content:counter(s);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);font-size:11px;font-weight:800;background:var(--paper)}
#steps li.done{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
#steps li.done::before{content:'✓';background:var(--ink);color:var(--paper)}

#amigos{margin-top:8px;padding-top:7px;border-top:2px dashed var(--line);display:flex;flex-wrap:wrap;gap:4px;font-size:12px;font-weight:800}
#amigos b{width:100%;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#amigos span{border:2px solid var(--ink);border-radius:999px;padding:0 7px;background:var(--paper-2)}
#amigos span.si{background:#bfe9c9}
#amigos span.no{background:#f3c9c9;text-decoration:line-through}

/* Móvil con el grupo de vecinos */
#phone{z-index:9}
.movil{width:min(360px,100%);height:min(620px,calc(100dvh - 40px));background:#18211f;border:3px solid var(--ink);border-radius:30px;
  box-shadow:0 8px 0 var(--ink);padding:10px;display:flex;flex-direction:column}
.mbar{display:flex;justify-content:space-between;color:#f4f4f4;font-size:12px;font-weight:800;padding:2px 14px 6px}
.wah{background:#1f6f5c;color:#fff;border-radius:20px 20px 0 0;padding:10px 14px;display:flex;flex-direction:column}
.wah b{font-family:var(--display);font-weight:600;font-size:16px}
.wah small{font-size:12px;font-weight:700;opacity:.85}
.msgs{flex:1;min-height:0;overflow-y:auto;background:#ece5dc;padding:10px;display:flex;flex-direction:column;gap:6px}
.m{align-self:flex-start;max-width:84%;background:#fff;color:var(--ink);border-radius:10px 10px 10px 2px;padding:6px 9px 4px;
  font-size:14px;font-weight:700;line-height:1.35;box-shadow:0 1px 0 rgba(0,0,0,.12);overflow-wrap:anywhere}
.m b{display:block;font-size:12px;font-weight:800}
.m time{display:block;text-align:right;font-size:10px;font-weight:700;color:#7d8a86}
.m.me{align-self:flex-end;background:#d4f5c4;border-radius:10px 10px 2px 10px}
.m.sys{align-self:center;background:#fdf3c4;font-size:12px;text-align:center}
.opts{background:#ece5dc;border-radius:0 0 20px 20px;padding:8px 10px 12px;display:grid;gap:6px}
.waBtn{border:2px solid var(--ink);background:var(--paper);border-radius:12px;padding:8px 10px;font-weight:800;font-size:14px;text-align:left;color:var(--ink)}
.waBtn:hover{background:var(--sun)}
.waBtn.main{background:var(--sun);text-align:center;font-family:var(--display);font-size:16px}

#tag{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));
  font-family:var(--display);font-weight:700;color:var(--paper);background:var(--magenta);border:2px solid var(--ink);
  border-radius:999px;padding:4px 12px;font-size:14px;box-shadow:0 3px 0 var(--ink)}

#reloj{position:fixed;top:calc(54px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));
  background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:3px 10px 4px;text-align:center;
  box-shadow:0 3px 0 var(--ink);line-height:1.1}
#reloj small{display:block;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#reloj b{display:block;font-family:var(--display);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}
#reloj.salto b{animation:salto .45s ease-out}
@keyframes salto{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#reloj.salto b{animation:none}}

#prompt{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 14px;font-weight:800;font-size:14px;white-space:nowrap}
#prompt kbd{font-family:var(--display);background:var(--sun);color:var(--ink);border-radius:6px;padding:1px 7px;margin-right:6px}
#help{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  color:var(--paper);background:rgba(42,27,45,.7);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;white-space:nowrap}

#act{position:fixed;right:max(20px,calc(env(safe-area-inset-right,0px) + 20px));bottom:calc(26px + env(safe-area-inset-bottom,0px));
  width:84px;height:84px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:15px;box-shadow:0 5px 0 var(--ink);display:none;line-height:1.05;padding:6px}
#act.off{background:var(--paper-2);color:var(--muted)}
@media (pointer:coarse){#act{display:block}#prompt,#help{display:none}}

#dlg{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:640px;background:var(--paper);
  border:3px solid var(--ink);border-radius:14px;box-shadow:0 6px 0 var(--ink);padding:14px 16px 12px;cursor:pointer;z-index:5}
#dWho{display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;color:var(--paper);background:var(--magenta);
  border:2px solid var(--ink);border-radius:8px;padding:1px 10px;margin:-30px 0 6px}
#dTxt{margin:0;font-size:16px;font-weight:700;line-height:1.45;max-width:60ch}
#dCh{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#dCh:empty{display:none}
.choice{border:2px solid var(--ink);background:var(--paper-2);border-radius:10px;padding:8px 12px;font-weight:800;font-size:14px;color:var(--ink)}
.choice:hover{background:var(--sun)}
#dMore{display:block;text-align:right;font-size:12px;font-weight:800;color:var(--muted);margin-top:4px}
#dlg.has-choices #dMore{display:none}

.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(42,27,45,.55);z-index:10;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:0 8px 0 var(--ink);padding:22px 20px 18px;width:min(420px,100%);text-align:left}
.card h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,8vw,42px);line-height:1;margin:0 0 4px;color:var(--magenta);text-wrap:balance}
.card .sub{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.card p{margin:0 0 12px;font-weight:700;line-height:1.45}
.roles{display:grid;gap:10px}
.role{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;border:2px solid var(--ink);background:var(--paper-2);
  border-radius:12px;padding:10px 12px;color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.role:hover{background:var(--sun)}
.role b{font-family:var(--display);font-size:18px;display:block}
.role span{font-size:13px;font-weight:700;color:var(--muted)}
.role:hover span{color:var(--ink)}
.role i{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:block}
.foot{font-size:12px;color:var(--muted);font-weight:700;margin-top:14px}
.big{font-family:var(--display);font-weight:700;font-size:18px;border:2px solid var(--ink);background:var(--sun);border-radius:12px;padding:10px 18px;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.back{border:0;background:none;color:var(--magenta);font-weight:800;font-size:13px;padding:0}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:min(52vh,420px);overflow-y:auto;padding:2px}
.pick{display:grid;justify-items:center;gap:2px;border:2px solid var(--ink);background:var(--paper-2);border-radius:12px;padding:6px 4px 8px;color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.pick:hover,.pick:focus-visible{background:var(--sun)}
.pick canvas{position:static;inset:auto;width:64px;height:64px;image-rendering:pixelated}
.pick b{font-family:var(--display);font-size:14px;line-height:1.1;text-align:center}
.pick span{font-size:11px;font-weight:700;color:var(--muted)}
#start .card{width:min(520px,100%)}
#result{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);margin:4px 0 12px}

#toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--sun);
  border:2px solid var(--ink);border-radius:10px;padding:7px 14px;font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--ink);
  max-width:calc(100vw - 32px);text-align:center;z-index:6}
@media (max-width:520px){#toast{top:auto;bottom:calc(124px + env(safe-area-inset-bottom,0px))}#mission{font-size:12px;padding:8px 10px}}

/* Minirretos */
#mini{z-index:11}
.minicard{width:min(460px,100%);max-height:100%;overflow-y:auto}
.minicard h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,6vw,28px);line-height:1.05;margin:0 0 6px;color:var(--ink)}
.minicard .sub{margin-bottom:6px}
.miBarra{position:relative;height:38px;margin:4px 0 12px;background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.miBuena{position:absolute;top:0;bottom:0;background:#8fd69e;border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.miMarca{position:absolute;top:-2px;bottom:-2px;width:8px;margin-left:-4px;background:var(--magenta);border:2px solid var(--ink);border-radius:4px}
.miBarra.llena .miMarca{display:none}
.miMedidor{height:18px;margin:4px 0 8px;background:var(--paper-2);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.miMedidor i{display:block;height:100%;width:0;background:var(--sun)}
.miContador{font-family:var(--display);font-weight:700;font-size:22px;text-align:center;margin:0 0 10px;font-variant-numeric:tabular-nums}
.miCampo{position:relative;height:clamp(150px,34vh,230px);margin:4px 0 10px;background:linear-gradient(#bfe6f2,#8fcde0);border:2px solid var(--ink);border-radius:12px;overflow:hidden;touch-action:manipulation}
.miObjetivo{position:absolute;min-width:56px;min-height:56px;display:grid;place-items:center;font-size:30px;line-height:1;border:2px solid var(--ink);border-radius:50%;background:var(--paper);box-shadow:0 3px 0 var(--ink);padding:0;touch-action:manipulation}
.miCarrera{display:grid;gap:8px;margin:4px 0 12px}
.miPista{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:center;font-weight:800;font-size:13px}
.miPista>div{position:relative;height:22px;background:var(--paper-2);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.miPista>div::after{content:'';position:absolute;right:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(#2a1b2d 0 4px,#fff8ee 4px 8px)}
.miPista i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun)}
.miPista.rival i{background:#7fb4e3}
.miOpciones{display:grid;gap:8px;margin:4px 0 6px}
.miOpc{border:2px solid var(--ink);background:var(--paper-2);border-radius:12px;padding:12px;min-height:48px;font-weight:800;font-size:15px;text-align:left;color:var(--ink);box-shadow:0 3px 0 var(--ink);touch-action:manipulation}
.miOpc:hover:not(:disabled){background:var(--sun)}
.miOpc.buena{background:#8fd69e}
.miOpc.mala{background:#f3c9c9}
.miBotones{display:flex;gap:10px}
.miBotones:empty{display:none}
.miBtn{flex:1;min-height:68px;font-family:var(--display);font-weight:700;font-size:20px;border:3px solid var(--ink);background:var(--sun);border-radius:14px;box-shadow:0 5px 0 var(--ink);color:var(--ink);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.miBtn:active,.miBtn.pulsado{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.miBtn:disabled{background:var(--paper-2);color:var(--muted)}
.miRes{margin:12px 0 0;font-family:var(--display);font-weight:700;font-size:20px;text-align:center}
.miRes small{display:block;font-family:var(--body);font-weight:700;font-size:14px;color:var(--muted);margin-top:2px}
.miRes.ok{color:#1d7a3a}
.miRes.ko{color:var(--magenta-2)}
@media (prefers-reduced-motion:reduce){.miBtn:active,.miBtn.pulsado{transform:none}}
.miLleno{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun)}
.miBarra.llena .miBuena{background:rgba(143,214,158,.7)}

/* Ficha del vecino elegido */
.ficha{margin:8px 0 14px}
.fichaCab{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px}
#fichaThumb canvas{position:static;inset:auto;width:96px;height:96px;image-rendering:pixelated;background:var(--paper-2);border:2px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink)}
.ficha h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,7vw,30px);line-height:1;margin:0 0 4px;color:var(--ink)}
#fichaFam{font-size:13px;font-weight:800;color:var(--muted)}
#fichaStep .big{width:100%}
#start .card{max-height:100%;overflow-y:auto}

/* Panel del niño: paso del agua, misión propia y puntos */
#steps li.cerrado{color:var(--muted)}
#steps li.cerrado::before{content:'–';background:var(--paper-2)}
#propia{margin-top:8px;padding-top:7px;border-top:2px dashed var(--line);font-weight:800;font-size:12px;line-height:1.35}
#propia.hecha{color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
#propia.hecha::after{content:' ✓'}
#propia.fallida{color:#b3261e;text-decoration:line-through;text-decoration-thickness:2px}
#puntos{margin-top:8px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#puntos b{font-size:15px;color:var(--ink)}