:root{--fondo:#fff;--texto:#1b1b1b;--elegida:#c2185b;--boton:#1b1b1b;--botontxt:#fff;--suave:rgba(128,128,128,.16);--borde:rgba(128,128,128,.45)}
body[data-color=negro]{--fondo:#101114;--texto:#f4f4f4;--elegida:#ffd400;--boton:#ffd400;--botontxt:#101114}
body[data-color=rojo]{--fondo:#a31515;--texto:#fff;--elegida:#ffe45c;--boton:#fff;--botontxt:#7a0e0e}
body[data-color=azul]{--fondo:#0b3d91;--texto:#fff;--elegida:#ffd54f;--boton:#fff;--botontxt:#0b3d91}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--fondo);color:var(--texto);font:16px/1.3 system-ui,Segoe UI,Roboto,sans-serif;overflow-x:hidden}
#app{max-width:520px;margin:0 auto;min-height:100%;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer}
.btn{background:var(--boton);color:var(--botontxt);border:0;border-radius:14px;min-height:48px;padding:10px 16px;font-weight:700}
.btn.sec{background:transparent;color:var(--texto);border:2px solid var(--borde)}
.btn.aviso{background:var(--elegida);color:var(--fondo)}
.btn[disabled]{opacity:.4}
.top{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--fondo);z-index:5}
.top h1{font-size:17px;margin:0;flex:1}
.top button{min-height:44px;min-width:44px;background:var(--suave);border:0;border-radius:10px}
.candi{margin:8px 10px 0;padding:8px 10px;border-radius:12px;background:var(--suave);font-size:14px}
main{flex:1;padding:10px 10px 90px}
.tabs{display:flex;gap:4px;padding:6px 10px 0;overflow-x:auto}
.tabs button{flex:1;min-height:46px;border:0;border-bottom:4px solid transparent;background:none;font-weight:700;white-space:nowrap;padding:0 8px}
.tabs button.on{border-color:var(--elegida)}
.card{border:1px solid var(--borde);border-radius:14px;padding:12px;margin:8px 0;background:var(--suave)}
.card h3{margin:0 0 6px;font-size:16px}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fila>.btn{flex:1}
.roles{display:grid;gap:12px;padding:12px}
.roles .btn{min-height:84px;font-size:20px;text-align:left}
.roles small{display:block;font-weight:400;font-size:13px}
.badge{background:var(--elegida);color:var(--fondo);border-radius:20px;padding:0 9px;font-size:14px;margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nino{min-height:76px;border:2px solid var(--borde);border-radius:14px;background:var(--suave);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;overflow:hidden}
.nino b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nino .st{font-size:22px}
.nino.vino{border-color:var(--elegida)}.nino.no{border-style:dashed}
.barra{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;display:flex;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--fondo);border-top:1px solid var(--borde);z-index:6}
.barra .btn{flex:1}
.contador{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.contador span{background:var(--suave);border-radius:20px;padding:4px 10px;font-size:14px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal>div{background:var(--fondo);color:var(--texto);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:14px;max-height:90vh;overflow:auto;border:2px solid var(--borde)}
.modal h2{margin:0 0 8px;font-size:19px}
.modal .btn{width:100%;margin-top:8px}
.grande{min-height:60px;font-size:19px}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips .btn{flex:1 1 40%}
.chip.on{background:var(--elegida);color:var(--fondo)}
.pre{font-size:13px;opacity:.85}
.lista li{padding:6px 0;border-bottom:1px solid var(--borde);list-style:none}.lista{padding:0;margin:0}
#toast{position:fixed;left:10px;right:10px;top:10px;max-width:500px;margin:auto;background:var(--boton);color:var(--botontxt);padding:10px 14px;border-radius:12px;font-weight:600;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
.pasos{display:flex;gap:4px;margin-bottom:8px}.pasos i{flex:1;height:6px;border-radius:3px;background:var(--borde)}.pasos i.on{background:var(--elegida)}
.num{font-size:28px;font-weight:800}
/* ---- niño ---- */
.mundo{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--mt)}
.mundo .masc{font-size:48px;line-height:1;transition:transform .3s}
.mundo .masc.fiesta{animation:salto .6s 2}
.mundo .masc.dorm{filter:grayscale(.6);opacity:.7}
.mundo.compacta .masc{font-size:36px}
@keyframes salto{50%{transform:translateY(-14px) scale(1.2)}}
.mundo .frase{font-weight:700;font-size:14px;flex:1}
.mundo .tok{font-weight:800}
.juego{flex:1;display:flex;flex-direction:column;padding:6px 12px 12px;gap:6px}
.preg{font-size:clamp(17px,4.8vw,24px);font-weight:700;text-align:center}
.vis{text-align:center;font-size:30px;line-height:1.15;min-height:0;word-break:break-word}
.vis.txt{font-size:15px;text-align:left}
.vis .c{display:inline-block;margin:0 2px;padding:0 1px;border-radius:6px}.vis .c.on{outline:3px solid var(--elegida)}
.ops{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,5vh,32px);margin:6px 0}
.ops.txt{grid-template-columns:1fr;gap:6px}
.op{background:none;border:0;font-size:clamp(56px,22vw,84px);font-weight:800;line-height:1;padding:4px;text-decoration:none;transition:transform .15s;color:var(--texto)}
.ops.txt .op{font-size:clamp(17px,4.6vw,21px);font-weight:700;padding:8px;min-height:44px;text-align:center}
.op.sel{color:var(--elegida);transform:scale(1.15);text-decoration:underline;text-decoration-thickness:6px;text-underline-offset:6px}
.ops.txt .op.sel{text-decoration-thickness:4px;text-underline-offset:4px}
.op.apagada{opacity:.25}
.resp{width:100%;min-height:56px;font-size:22px}
.guia{min-height:44px;text-align:center;font-size:15px;font-weight:600;padding:4px 6px}
.salidas{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.salidas .btn{min-height:44px;font-size:14px;flex:1 1 30%}
.debajo{display:flex;justify-content:space-between;font-size:13px;opacity:.85}
.puntos{display:flex;gap:4px;justify-content:center}.puntos i{width:12px;height:12px;border-radius:50%;background:var(--borde)}.puntos i.on{background:var(--elegida)}
.estrellas{font-size:34px;text-align:center}
@media (max-height:640px){.mundo .masc{font-size:36px}.mundo{padding:4px 10px}.vis{font-size:24px}.juego{gap:4px}.ops{margin:2px 0}.op{font-size:clamp(48px,18vw,64px)}}

.av{width:1.15em;height:1.15em;border-radius:50%;object-fit:cover;vertical-align:middle;border:2px solid var(--borde)}
.av.grande{width:72px;height:72px;font-size:40px}.av.vacia{display:inline-flex;align-items:center;justify-content:center;background:var(--suave)}
.nino .st .av{width:44px;height:44px}.avw{position:relative;display:inline-block;line-height:0}.avw .ins{position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:16px;line-height:1;background:#fff;border-radius:50%}
.perfil{display:flex;gap:12px;align-items:center}.avbtn{background:none;border:0;padding:0}
.recorte{width:100%;max-width:300px;aspect-ratio:1;border-radius:50%;touch-action:none;display:block;margin:0 auto;border:3px solid var(--borde)}
.filebtn{display:flex;align-items:center;justify-content:center;cursor:pointer}
#zoom{width:100%;margin:6px 0}
.card h3 .av{width:1.9em;height:1.9em}

.busca{width:100%;min-height:52px;font-size:17px;padding:0 14px;border-radius:14px;border:2px solid var(--elegida);background:var(--fondo);color:var(--texto);box-sizing:border-box}
.wres{display:flex;flex-direction:column;gap:8px;margin:8px 0}.wres .tema{width:100%;text-align:left}

/* 18/10: contraste ≥ 4,5:1; tarjetas y bordes salen del tema */
.chip,.btn.sec{background:var(--fondo);color:var(--texto);border:2px solid var(--borde)}
.chip.on,.btn.chip.on{background:var(--boton);color:var(--botontxt);border-color:var(--boton)}
.modal>div{background:var(--fondo);color:var(--texto);border:2px solid var(--borde)}
.tema-editor h3{margin:8px 0}
.top{top:env(safe-area-inset-top)}