:root{--fondo:#120c2b;--panel:#1d1442;--borde:#35295f;--oro:#e7c873;--texto:#efeaff;--suave:#a9a0cf;--rojo:#e58a8a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--fondo);color:var(--texto);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background:radial-gradient(1px 1px at 20% 30%,#fff8 50%,transparent),radial-gradient(1px 1px at 70% 20%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 85% 70%,#e7c87388 50%,transparent),radial-gradient(1px 1px at 35% 80%,#fff6 50%,transparent),radial-gradient(120% 70% at 50% -10%,#2c1d63,transparent 70%),var(--fondo);background-attachment:fixed}
#app{max-width:520px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom))}
.cab{text-align:center;margin:8px 0 18px;position:relative}
h1{font:600 30px/1.2 Georgia,"Times New Roman",serif;color:var(--oro);margin:0;letter-spacing:.5px}
.sub{color:var(--suave);margin:4px 0 0}
.atras{position:absolute;left:-4px;top:0;background:none;border:0;color:var(--oro);font-size:34px;line-height:1;padding:4px 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.chip{background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:999px;padding:8px 14px;font-size:15px}
.chip.on{border-color:var(--oro);color:var(--oro)}.chip.mas{color:var(--suave);border-style:dashed}
.menu{display:grid;gap:12px}
.tarjeta{display:flex;gap:16px;align-items:center;text-align:left;background:linear-gradient(135deg,#24194f,#1a1238);border:1px solid var(--borde);border-radius:18px;padding:18px;color:var(--texto);font:inherit}
.tarjeta:active{border-color:var(--oro)}
.tarjeta .ico{font-size:32px;width:46px;text-align:center;color:var(--oro)}
.tarjeta b{display:block;font:600 19px Georgia,serif}.tarjeta small{color:var(--suave);font-size:14px}
.form{display:grid;gap:14px}
label{display:grid;gap:6px;color:var(--suave);font-size:15px}
input,select{width:100%;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:12px;padding:13px;font:inherit}
input:disabled{opacity:.4}
.chk{display:flex;align-items:center;gap:10px}.chk input{width:22px;height:22px}
button{font:inherit;cursor:pointer}
.primario{background:var(--oro);color:#2a1d00;border:0;border-radius:14px;padding:15px;font-weight:600}
.peligro{background:none;border:1px solid var(--rojo);color:var(--rojo);border-radius:14px;padding:13px}
.link{background:none;border:0;color:var(--suave);padding:12px;text-decoration:underline;display:block;margin:6px auto}
.hechos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hecho{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:6px 10px;font-size:14px;color:var(--oro)}
.texto{background:#1a1238cc;border:1px solid var(--borde);border-radius:18px;padding:6px 20px;margin-bottom:14px}
.texto p{margin:14px 0}.texto strong{color:var(--oro)}
.carga{display:flex;gap:8px;justify-content:center;padding:26px}
.carga i{width:10px;height:10px;border-radius:50%;background:var(--oro);animation:p 1s infinite ease-in-out}
.carga i:nth-child(2){animation-delay:.2s}.carga i:nth-child(3){animation-delay:.4s}
@keyframes p{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
.cartas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.carta{position:relative;aspect-ratio:2/3.2;border:0;background:none;padding:0;perspective:700px}
.cara{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:12px;border:1px solid var(--oro);backface-visibility:hidden;transition:transform .6s;padding:6px}
.dorso{background:repeating-linear-gradient(45deg,#2c1d63,#2c1d63 8px,#241752 8px,#241752 16px);color:var(--oro);font-size:34px}
.frente{background:#f3ead0;color:#2a1d00;transform:rotateY(180deg)}
.frente small{font-size:11px;color:#6b5a2e;margin-bottom:6px}.frente b{font:600 15px Georgia,serif}
.carta.abierta .dorso{transform:rotateY(180deg)}.carta.abierta .frente{transform:rotateY(0)}
.ayuda{text-align:center;color:var(--suave);font-size:15px}
.acciones{display:grid;gap:6px}
.nota{color:var(--suave);font-size:13px;text-align:center;margin-top:22px}

.sec{color:var(--suave);font-size:14px;text-align:center;margin:22px 0 8px;letter-spacing:1px;text-transform:uppercase}

label.grande{gap:8px;color:var(--oro);font:600 13px Georgia,serif;letter-spacing:2px;text-transform:uppercase}
label.grande input{font:500 21px Georgia,serif;letter-spacing:.3px;color:#fff;padding:17px 18px;border-radius:18px;border:1.5px solid #e7c87377;background:linear-gradient(135deg,#251a55,#1a1238);box-shadow:0 0 0 0 #e7c87300;transition:box-shadow .25s,border-color .25s;text-transform:none}
label.grande input::placeholder{color:#a9a0cf88;font-style:italic}
label.grande input:focus{outline:none;border-color:var(--oro);box-shadow:0 0 22px #e7c87344,inset 0 0 12px #e7c87318}
.cab .sub small{opacity:.75}

.lista{display:grid;gap:12px;margin:12px 0}.lista .chk{align-items:flex-start;color:var(--texto)}
.alerta{border-color:var(--rojo)}.alerta strong{color:var(--rojo)}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 16px}
.ficha div{background:linear-gradient(135deg,#251a55,#1a1238);border:1px solid var(--oro);border-radius:16px;padding:14px;text-align:center}
.ficha small{display:block;color:var(--suave);font-size:13px}.ficha b{font:600 24px Georgia,serif;color:var(--oro)}
.seguro{color:var(--suave);font-size:14px;padding-left:20px;margin:6px 0 14px}
.reloj{font:600 72px/1.1 Georgia,serif;color:var(--oro);text-align:center;margin:40px 0 10px;text-shadow:0 0 24px #e7c87355}
.chip{cursor:pointer}

.ficha em{display:block;font-style:normal;color:var(--suave);font-size:13px;margin-top:2px}
.mini{padding:2px 18px;margin-bottom:10px}.mini h3{font:600 13px Georgia,serif;letter-spacing:2px;text-transform:uppercase;color:var(--oro);margin:14px 0 0}
.mini p{margin:8px 0}.peq{color:var(--suave);font-size:14px}
.guia{font:italic 20px/1.5 Georgia,serif;color:var(--texto);text-align:center;margin:10px 4px 26px;min-height:96px}

.enlaces{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.enlaces a.chip{text-decoration:none;color:var(--oro);border-color:var(--oro)}
.pasos{padding-left:20px;margin:10px 0}.pasos li{margin:8px 0}.zonas{padding-left:18px;margin:6px 0 10px;color:var(--suave);font-size:15px}.zonas b{color:var(--oro)}
.guia{min-height:150px;font-size:18px}

.puntos{display:flex;gap:16px;justify-content:center;margin:26px 0 30px}
.puntos i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--oro);transition:background .15s}
.puntos i.on{background:var(--oro);box-shadow:0 0 12px #e7c87388}
.teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:320px;margin:0 auto}
.teclas button{height:68px;border-radius:50%;border:1px solid var(--borde);background:linear-gradient(135deg,#251a55,#1a1238);color:var(--texto);font:500 28px Georgia,serif}
.teclas button:active{border-color:var(--oro);color:var(--oro)}.teclas .vacio{visibility:hidden}

.barras{display:grid;gap:8px;margin:12px 0}.barra{display:grid;grid-template-columns:62px 1fr 42px;align-items:center;gap:8px;font-size:14px}.barra span{color:var(--suave)}
.barra i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#b8923f,var(--oro))}.barra b{text-align:right;color:var(--oro);font-weight:600}
details.zona{margin:8px 0;border:1px solid var(--borde);border-radius:12px;padding:8px 12px;background:#150e33}details.zona summary{cursor:pointer;color:var(--texto)}details.zona p{margin:8px 0}
.guia{font:400 17px/1.55 system-ui,sans-serif;text-align:left;min-height:210px;margin:6px 2px 18px}.guia p{margin:8px 0}.z-tit{font:600 19px Georgia,serif;color:var(--oro)}