/* ===== BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow-x:hidden}
body{font-family:'Nunito',sans-serif;background:linear-gradient(135deg,#f5eeff 0%,#fce4f0 50%,#e4f0ff 100%);min-height:100vh;color:#2c2444}

.pantalla{display:none;min-height:100vh;padding:1rem}
.pantalla.activa{display:block}

/* ===== BIENVENIDA ===== */
.bienvenida-wrap{max-width:680px;margin:0 auto;text-align:center;padding:1.5rem 1rem 3rem}
.estrellas-fondo{position:relative;height:0}
.estrella{position:absolute;font-size:22px;color:#c4b5f5;animation:girar 4s linear infinite}
.s1{top:-30px;left:5%}.s2{top:-50px;left:20%}.s3{top:-20px;left:45%}
.s4{top:-40px;left:65%}.s5{top:-25px;left:82%}.s6{top:-55px;left:90%}
@keyframes girar{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}}
.unicornio-hero{font-size:88px;margin:1rem 0 0.5rem;animation:flotar-hero 3s ease-in-out infinite}
@keyframes flotar-hero{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.titulo-bienvenida{font-size:clamp(28px,6vw,46px);font-weight:800;color:#3c3489;margin-bottom:4px}
.nombre-color{color:#d4537e}
.sub-bienvenida{font-size:16px;color:#7f77dd;margin-bottom:1rem}
.monedas-total-wrap{display:inline-flex;align-items:center;gap:8px;background:#fbeaf0;border-radius:50px;padding:8px 20px;margin-bottom:0.75rem;border:2px solid #ed93b1}
.moneda-ico{font-size:20px;color:#d4537e}
#monedas-total-display{font-size:24px;font-weight:800;color:#72243e}
.monedas-lbl{font-size:13px;color:#993556}
.accesorios-equip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:24px;min-height:30px;margin-bottom:1rem}

/* ===== GRID JUEGOS ===== */
.juegos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:0.5rem}
.juego-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:white;border:2.5px solid #d8d2f7;border-radius:18px;padding:1.1rem 0.75rem;cursor:pointer;transition:transform 0.15s,border-color 0.15s;text-align:center}
.juego-btn:hover{transform:translateY(-4px) scale(1.03);border-color:#7f77dd}
.juego-btn:active{transform:scale(0.97)}
.juego-ico{font-size:36px;margin-bottom:2px}
.juego-nombre{font-size:15px;font-weight:800;color:#3c3489}
.juego-desc{font-size:11px;color:#888780}
.juego-niveles{font-size:11px;font-weight:700;background:#eeedfe;color:#534ab7;padding:2px 10px;border-radius:20px;margin-top:2px}
.tienda-btn{border-color:#f4c0d1}
.tienda-btn:hover{border-color:#d4537e}
.tienda-btn .juego-niveles{background:#fbeaf0;color:#72243e}

/* ===== REINICIAR ===== */
.btn-reiniciar{display:inline-block;margin-top:1.5rem;background:transparent;color:#b4b2a9;border:1.5px dashed #d3d1c7;border-radius:12px;padding:10px 22px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:all 0.2s}
.btn-reiniciar:hover{color:#e24b4a;border-color:#e24b4a;background:#fef2f2}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-card{background:white;border-radius:20px;padding:2rem 1.5rem;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.2);animation:modal-in 0.3s ease}
@keyframes modal-in{0%{transform:scale(0.85);opacity:0}100%{transform:scale(1);opacity:1}}
.btn-danger{background:#e24b4a;color:white;border:none;border-radius:12px;padding:11px 24px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform 0.1s}
.btn-danger:hover{transform:scale(1.04);background:#c9302c}

/* ===== HEADER JUEGO ===== */
.game-header{display:flex;justify-content:space-between;align-items:center;max-width:680px;margin:0 auto 0.75rem;background:white;border-radius:16px;padding:10px 16px;border:1.5px solid #d8d2f7}
.game-header-left{display:flex;align-items:center;gap:10px}
.btn-volver{background:#eeedfe;border:none;border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;color:#534ab7;cursor:pointer;transition:background 0.15s}
.btn-volver:hover{background:#cecbf6}
.game-monedas{display:flex;align-items:center;gap:6px;background:#fbeaf0;border-radius:10px;padding:6px 14px;border:1.5px solid #ed93b1}
.game-monedas-num{font-size:18px;font-weight:800;color:#72243e}
.game-monedas-lbl{font-size:11px;color:#993556}
.btn-voz{background:#eeedfe;border:none;border-radius:10px;padding:7px 10px;font-size:16px;cursor:pointer;transition:background 0.15s}
.btn-voz:hover{background:#cecbf6}

.uni-mini-wrap{text-align:center;margin-bottom:0.6rem}
.uni-mini-ico{font-size:42px}
.uni-mini-badges{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-size:16px;margin-top:2px}

.prog-bar-wrap{display:flex;gap:5px;justify-content:center;margin-bottom:0.6rem;flex-wrap:wrap}
.prog-dot{width:13px;height:13px;border-radius:50%;background:#e8e4ff;border:2px solid #c4b5f5;transition:background 0.2s}
.prog-dot.ok{background:#639922;border-color:#3b6d11}
.prog-dot.no{background:#e24b4a;border-color:#a32d2d}
.nivel-badge{display:inline-block;background:#534ab7;color:white;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:0.6rem}

/* ===== CARDS ===== */
.pregunta-card{background:white;border:2px solid #d8d2f7;border-radius:18px;padding:1.1rem;margin-bottom:0.75rem;text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.pregunta-num-grande{font-size:52px;font-weight:800;color:#3c3489;line-height:1}
.pregunta-sub{font-size:14px;color:#888780;margin-top:4px}
.instruccion-banner{background:#eeedfe;border-radius:12px;padding:9px 16px;font-size:14px;font-weight:700;color:#3c3489;text-align:center;margin-bottom:0.6rem;max-width:680px;margin-left:auto;margin-right:auto;border:1.5px solid #afa9ec}
.pista-banner{background:#fbeaf0;border-radius:10px;padding:7px 14px;font-size:13px;color:#72243e;text-align:center;margin-bottom:0.6rem;max-width:680px;margin-left:auto;margin-right:auto;border:1.5px solid #ed93b1;line-height:1.5}

/* ===== FEEDBACK ===== */
.feedback-box{border-radius:16px;padding:1rem 1.25rem;margin-bottom:0.75rem;text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.feedback-box.ok{background:#eaf3de;border:2px solid #97c459}
.feedback-box.no{background:#fbeaf0;border:2px solid #ed93b1}
.feedback-titulo{font-size:18px;font-weight:800;margin-bottom:6px}
.feedback-titulo.ok{color:#27500a}
.feedback-titulo.no{color:#72243e}
.feedback-exp{font-size:14px;line-height:1.8}
.feedback-exp.ok{color:#3b6d11}
.feedback-exp.no{color:#993556}

/* ===== BOTONES ===== */
.btn-primario{background:#534ab7;color:white;border:none;border-radius:12px;padding:12px 28px;font-size:16px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform 0.1s}
.btn-primario:hover{transform:scale(1.04)}
.btn-primario:active{transform:scale(0.96)}
.btn-rosa{background:#d4537e;color:white;border:none;border-radius:12px;padding:11px 24px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform 0.1s;margin-top:10px}
.btn-rosa:hover{transform:scale(1.04)}
.btn-gris{background:transparent;color:#888780;border:1.5px solid #d3d1c7;border-radius:12px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Nunito',sans-serif;transition:background 0.15s}
.btn-gris:hover{background:#f1efe8}
.btn-center{display:block;margin:0 auto}

/* ===== CINTA ===== */
.cinta-wrap{margin-bottom:0.75rem;overflow-x:auto;padding-bottom:4px;max-width:680px;margin-left:auto;margin-right:auto}
.cinta-lbl{font-size:11px;color:#888780;text-align:center;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700}
.cinta-row{display:flex;gap:0;width:max-content;margin:0 auto}
.cinta-cel{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#534ab7;border-top:2px solid #afa9ec;border-bottom:2px solid #afa9ec;border-right:1px solid #d8d2f7;background:white}
.cinta-cel:first-child{border-left:2px solid #afa9ec;border-radius:8px 0 0 8px}
.cinta-cel:last-child{border-radius:0 8px 8px 0}
.cinta-cel.dest{background:#534ab7;color:white;border-color:#3c3489;transform:scaleY(1.18);z-index:1;font-size:13px}
.cinta-arrow{display:flex;align-items:center;justify-content:center;margin-top:5px;gap:4px}
.cinta-arrow span{font-size:11px;color:#afa9ec;font-weight:700}

/* ===== FINAL ===== */
.final-card{background:white;border:2px solid #d8d2f7;border-radius:20px;padding:1.75rem 1.25rem;text-align:center;max-width:480px;margin:1rem auto}
.final-titulo{font-size:24px;font-weight:800;color:#534ab7;margin-bottom:8px}
.final-sub{font-size:15px;color:#888780;margin-bottom:6px}
.final-monedas{font-size:36px;font-weight:800;color:#72243e;margin-bottom:1rem}

/* ===== TIENDA ===== */
.tienda-wrap{max-width:680px;margin:0 auto}
.tienda-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:1.5rem}
.acc-card{background:white;border:2px solid #d8d2f7;border-radius:16px;padding:12px;text-align:center;cursor:pointer;transition:transform 0.15s,border-color 0.15s}
.acc-card:hover{transform:scale(1.05);border-color:#7f77dd}
.acc-card.comprado{background:#eeedfe;border-color:#afa9ec;cursor:default}
.acc-ico{font-size:32px;margin-bottom:4px}
.acc-nombre{font-size:13px;font-weight:700;color:#3c3489;margin-bottom:3px}
.acc-precio{font-size:13px;font-weight:800;color:#72243e}
.acc-ya{font-size:12px;font-weight:700;color:#534ab7}

/* ===== BARRA TIEMPO ===== */
.tiempo-wrap{max-width:680px;margin:0 auto 0.6rem;background:#e8e4ff;border-radius:20px;height:12px;overflow:hidden;border:1.5px solid #afa9ec}
.tiempo-barra{height:100%;background:#7f77dd;border-radius:20px;transition:width 0.25s linear,background 0.3s}

/* ===== BLOQUES ===== */
.bloques-area{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem;max-width:680px;margin-left:auto;margin-right:auto}
.col-bloques{background:white;border:2px solid #d8d2f7;border-radius:16px;padding:1rem;flex:1;min-width:130px;max-width:220px;text-align:center}
.col-bloques-titulo{font-size:12px;font-weight:800;color:#888780;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px}
.bloques-grid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:40px;margin-bottom:8px}
.blq-d{width:34px;height:16px;background:#afa9ec;border-radius:4px;cursor:pointer;border:2px solid #7f77dd;transition:transform 0.1s}
.blq-d:hover{transform:scale(1.15)}
.blq-d.on{opacity:0.45;cursor:default;transform:none}
.blq-u{width:18px;height:18px;background:#ed93b1;border-radius:4px;cursor:pointer;border:2px solid #d4537e;transition:transform 0.1s}
.blq-u:hover{transform:scale(1.15)}
.blq-u.on{opacity:0.45;cursor:default;transform:none}
.col-contador{font-size:26px;font-weight:800;color:#3c3489}
.leyenda-bloques{display:flex;gap:14px;justify-content:center;margin-bottom:0.6rem;flex-wrap:wrap}
.ley-item{display:flex;align-items:center;gap:5px;font-size:12px;color:#888780;font-weight:700}
.ley-d{width:24px;height:12px;background:#afa9ec;border-radius:3px;border:2px solid #7f77dd;display:inline-block}
.ley-u{width:13px;height:13px;background:#ed93b1;border-radius:3px;border:2px solid #d4537e;display:inline-block}

/* ===== BALANZA ===== */
.balanza-wrap{display:flex;justify-content:center;margin:0.5rem 0 0.75rem}
.btns-simbolo{display:flex;gap:12px;justify-content:center;margin-bottom:0.75rem}
.btn-sim{width:68px;height:68px;border-radius:50%;border:2.5px solid #afa9ec;background:white;font-size:26px;font-weight:800;color:#534ab7;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform 0.1s,background 0.1s}
.btn-sim:hover{background:#eeedfe;transform:scale(1.1)}
.btn-sim.sel{background:#534ab7;color:white;border-color:#3c3489}

/* ===== FLORES ===== */
.flores-row{display:flex;gap:8px;justify-content:center;align-items:flex-end;margin-bottom:1rem;overflow-x:auto;padding:0 4px 4px;max-width:680px;margin-left:auto;margin-right:auto}
.flor-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:68px}
.num-flor{font-size:17px;font-weight:800;color:#3c3489;background:#eeedfe;border-radius:10px;padding:5px 8px;min-width:50px;text-align:center;border:2px solid #afa9ec}
.num-flor.hueco{background:#fbeaf0;border:2.5px dashed #d4537e;color:#d4537e;cursor:pointer;transition:transform 0.1s}
.num-flor.hueco:hover{transform:scale(1.08)}
.num-flor.hueco.activo{background:#f4c0d1;border-color:#993556}
.opciones-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:0.75rem;max-width:680px;margin-left:auto;margin-right:auto}
.opt-btn{width:64px;height:54px;border-radius:12px;border:2px solid #afa9ec;background:white;font-size:20px;font-weight:800;color:#534ab7;cursor:pointer;font-family:'Nunito',sans-serif;transition:transform 0.1s,background 0.1s}
.opt-btn:hover{background:#eeedfe;transform:scale(1.08)}
.opt-btn-grande{width:76px;height:62px;font-size:22px}

/* ===== TARJETAS ORDENAR ===== */
.zona-desordenada{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;min-height:96px;padding:10px;background:#f5eeff;border-radius:16px;border:2.5px dashed #afa9ec;margin-bottom:1rem;max-width:680px;margin-left:auto;margin-right:auto}
.slots-area{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:0.75rem;max-width:680px;margin-left:auto;margin-right:auto}
.slot-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.slot-lbl{font-size:11px;font-weight:700;color:#888780}
.slot{width:82px;height:82px;border-radius:16px;border:2.5px dashed #afa9ec;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.15s,background 0.15s}
.slot.ocupado{border:2.5px solid #7f77dd;background:#eeedfe}
.slot.activo-slot{border-color:#d4537e;background:#fbeaf0}
.tarjeta-num{width:82px;height:82px;border-radius:16px;border:2.5px solid #7f77dd;background:#eeedfe;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#3c3489;cursor:pointer;transition:transform 0.15s;user-select:none;font-family:'Nunito',sans-serif}
.tarjeta-num:hover{transform:scale(1.08)}
.tarjeta-num.sel{border-color:#d4537e;background:#f4c0d1;color:#72243e;transform:scale(1.11)}
.tarjeta-num.en-slot{cursor:pointer;border-color:#534ab7}

/* ===== GLOBOS ===== */
.cielo{background:linear-gradient(180deg,#bde0fb 0%,#e8f4fd 100%);border-radius:18px;width:100%;height:320px;position:relative;overflow:hidden;border:2px solid #85b7eb;margin-bottom:0.75rem;max-width:680px;margin-left:auto;margin-right:auto}
.nube{position:absolute;background:white;border-radius:50px;opacity:0.7}
.globo-wrap{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform 0.1s;user-select:none}
.globo-wrap:hover{transform:scale(1.1)}
.globo-wrap:active{transform:scale(0.9)}
.globo-body{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-family:'Nunito',sans-serif}
.globo-hilo{width:2px;height:20px;background:#b4b2a9;margin:0 auto}
.globo-tri{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;margin:0 auto}
.buscar-box{background:white;border:2.5px solid #d8d2f7;border-radius:16px;padding:10px 20px;text-align:center;margin-bottom:0.6rem;max-width:680px;margin-left:auto;margin-right:auto}
.buscar-lbl{font-size:13px;font-weight:700;color:#534ab7;margin-bottom:2px}
.buscar-num{font-size:44px;font-weight:800;color:#3c3489;line-height:1.1}
.buscar-palabras{font-size:13px;color:#7f77dd;font-weight:700;margin-top:2px}

/* ===== SUMAS Y RESTAS ===== */
.suma-num{background:white;border:2.5px solid #afa9ec;border-radius:16px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;color:#3c3489}
.suma-signo{font-size:32px;font-weight:800;color:#7f77dd}
.resta-signo{color:#d4537e}
.suma-resp{border-color:#fac775;background:#fffaed;color:#ba7517}

/* ===== MEMORIA ===== */
.memoria-grid{display:grid;gap:12px;max-width:500px;margin:0 auto 1rem;padding:0 8px}
.mem-carta{width:100%;aspect-ratio:1;border-radius:16px;border:2.5px solid #d8d2f7;background:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s,border-color 0.2s,background 0.2s;user-select:none}
.mem-carta:hover{transform:scale(1.05)}
.mem-carta.volteada{background:#eeedfe;border-color:#7f77dd;transform:rotateY(0deg)}
.mem-carta.encontrada{background:#eaf3de;border-color:#97c459;cursor:default}
.mem-carta.encontrada:hover{transform:none}
.mem-num{font-size:28px;font-weight:800;color:#3c3489}
.mem-carta.encontrada .mem-num{color:#3b6d11}
.mem-dorso{font-size:28px;animation:pulsar-dorso 2s ease-in-out infinite}
@keyframes pulsar-dorso{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ===== NIVEL BTN ===== */
.nivel-btn{padding:8px 20px;border-radius:12px;border:2px solid #afa9ec;background:white;font-size:14px;font-weight:800;color:#534ab7;cursor:pointer;font-family:'Nunito',sans-serif;transition:background 0.15s,border-color 0.15s}
.nivel-btn:hover{background:#eeedfe;border-color:#7f77dd}
.nivel-btn.activo{background:#534ab7;color:white;border-color:#3c3489}

/* ===== CONFETI ===== */
.confeti-p{position:fixed;border-radius:3px;pointer-events:none;z-index:999;animation:confeti-caer 1.4s ease-in forwards}
@keyframes confeti-caer{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(160px) rotate(480deg);opacity:0}}

/* ===== ANIM GLOBOS ===== */
@keyframes flotar-globo{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes explotar-globo{0%{transform:scale(1);opacity:1}60%{transform:scale(1.7);opacity:0.5}100%{transform:scale(0);opacity:0}}
.punto-vuela{position:absolute;font-size:18px;font-weight:800;pointer-events:none;animation:vuela-punto 1s ease forwards;z-index:20;color:#27500a}
.punto-vuela.malo{color:#a32d2d}
@keyframes vuela-punto{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-60px);opacity:0}}

.game-body{max-width:680px;margin:0 auto}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
  .juegos-grid{grid-template-columns:repeat(2,1fr)}
  .bloques-area{flex-direction:column;align-items:center}
  .col-bloques{width:100%;max-width:none}
  .cielo{height:260px}
  .tarjeta-num,.slot{width:70px;height:70px;font-size:24px}
  .suma-num{width:65px;height:65px;font-size:28px}
  .memoria-grid{gap:8px}
  .mem-num{font-size:22px}
}