/* ========================================================= Mi Piano — juego --------------------------------------------------------- Juego de lectura de notas. ========================================================= */ /* El salón de juegos REEMPLAZA a la sección principal, no se apila encima: la cabecera de la app sigue a la vista y
se aparta mientras dure. Misma regla para el cancionero (ver cancionero.css). */ .juego{display:none;background:var(--paper); padding:14px 16px calc(16px + env(safe-area-inset-bottom))} body.juego-on .juego{display:block} body.juego-on .layout main{display:none} /* portada */ .juego-menu{display:none;max-width:820px;margin:0 auto} body.juego-menu-on .juego-menu{display:block} body.juego-menu-on .juego-card{display:none} .juego-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .juego-menu-top h2{margin:0;font-size:1.45rem} .juegocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px} .juegocard{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer; font-family:inherit;background:#fff;border:2px solid var(--line);border-radius:18px; padding:18px 14px 14px;text-align:center;transition:transform .12s,border-color .12s} .juegocard:hover{border-color:var(--gold);transform:translateY(-3px)} .jc-icono{font-size:3rem;line-height:1} .jc-titulo{font-size:1.08rem;font-weight:700;color:var(--ink)} .jc-desc{font-size:.82rem;color:var(--soft);line-height:1.4;min-height:2.3em} .jc-record{font-size:.78rem;color:var(--gold-dk);font-weight:600;background:#fdf3dd; border-radius:9px;padding:3px 10px;margin-top:4px} .jc-record.jc-nuevo{background:#eef6f0;color:var(--ok)} /* el juego en marcha, centrado como una página */ .juego-card{position:relative;background:#fff;border-radius:20px;padding:14px 18px 20px; width:min(560px,100%);margin:0 auto;box-shadow:0 10px 36px rgba(0,0,0,.14); animation:fiestaIn .3s cubic-bezier(.2,1.3,.4,1)} .juego-top{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap} .juego-titulo{font-weight:700;font-size:1rem} .juego-top select{font-family:inherit;font-size:.82rem;padding:6px 8px;border:1px solid var(--line); border-radius:9px;background:#fff;margin-left:auto} #juegomarcador{font-size:.82rem;color:var(--soft)} #juegomarcador b{color:var(--ink)} .juego-sheet{position:relative;margin:10px 0 4px;min-height:120px;display:grid;place-items:center} .juego-sheet > div{width:min(230px,60%)} .juego-sheet svg{width:100%;height:auto;display:block} .juegochispa{position:absolute;inset:0;display:grid;place-items:center;font-size:3.4rem; opacity:0;pointer-events:none} .juegochispa.va{animation:chispa .62s ease-out} @keyframes chispa{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.25)} 100%{opacity:0;transform:scale(1.7)}} .juego-pista{text-align:center;font-size:.78rem;color:var(--soft);margin-bottom:12px} .segmini button{height:34px;padding:0 10px;font-size:.78rem} .segmini button.on{background:var(--ink);color:#fff} .juegooculto{display:none;place-items:center;min-height:110px} /* qué se ve en cada juego: oído y loro esconden el papel (el estímulo es sonoro); eco/sube esconden papel Y teclado (se responde con tambor o flechas); intruso enseña el papel y responde con los números. */ body.juego-oido #juegosheet, body.juego-loro #juegosheet, body.juego-eco #juegosheet, body.juego-sube #juegosheet{display:none} body.juego-oido .juegooculto, body.juego-loro .juegooculto, body.juego-eco .juegooculto, body.juego-sube .juegooculto{display:grid} body.juego-eco .juegokb, body.juego-eco .juego-ayuda, body.juego-sube .juegokb, body.juego-sube .juego-ayuda, body.juego-intruso .juegokb, body.juego-intruso .juego-ayuda{display:none} /* tambor del eco */ .juegotambor{display:none;margin:0 auto;width:150px;height:150px;border-radius:50%; font-size:3.6rem;cursor:pointer;font-family:inherit; background:#fdf3dd;border:3px solid var(--gold); box-shadow:0 6px 0 #d9b877, inset 0 -8px 14px rgba(0,0,0,.08)} body.juego-eco .juegotambor{display:block} .juegotambor:active,.juegotambor.late{transform:translateY(4px);box-shadow:0 2px 0 #d9b877} .juegotambor.late{animation:tamborpulso .18s ease-out} @keyframes tamborpulso{50%{background:#ffe1a0}} /* flechas de sube/baja */ .juegoflechas{display:none;justify-content:center;gap:18px} body.juego-sube .juegoflechas{display:flex} .juegoflechas button{width:120px;height:110px;font-size:3rem;cursor:pointer;font-family:inherit; border:2px solid var(--line);border-radius:18px;background:#fff} .juegoflechas button:hover{border-color:var(--gold);background:#fffaf0} .juegoflechas button.bien{background:var(--ok);border-color:var(--ok)} .juegoflechas button.mal{background:var(--red);border-color:var(--red)} /* botón de saltar del eco (aparece tras tres intentos) */ .juegosaltar{display:block;margin:10px auto 0} /* posiciones del intruso */ .juegoposiciones{display:none;justify-content:center;gap:12px} body.juego-intruso .juegoposiciones{display:flex} .juegoposiciones button{width:76px;height:76px;font-size:1.9rem;font-weight:700;cursor:pointer; font-family:inherit;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink)} .juegoposiciones button:hover{border-color:var(--gold);background:#fffaf0} .juegoposiciones button.bien{background:var(--ok);border-color:var(--ok);color:#fff} .juegoposiciones button.mal{background:var(--red);border-color:var(--red);color:#fff} /* el altavoz del intruso: más pequeño que los números, que no compita */ .juegoposiciones .juegooye{width:56px;height:76px;font-size:1.3rem; background:#fdf3dd;border-color:var(--gold)} /* globo de la caza de notas */ .juegoglobobar{height:0;overflow:hidden;border-radius:5px;background:#f2dfe2;transition:height .2s} body.juego-caza .juegoglobobar{height:9px;margin:4px 0 2px} .juegoglobobar > i{display:block;height:100%;width:100%;border-radius:5px; background:linear-gradient(90deg,#e8798f,#e8b94e)} #juegocaza.on{background:var(--gold);border-color:var(--gold);color:#fff} .juegoprog{height:6px;background:#eee7d8;border-radius:4px;overflow:hidden;margin:9px 0 2px} .juegoprog > i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s} .juego-final{display:none;text-align:center;padding:18px 4px 6px} body.juego-fin .juego-jugando{display:none} body.juego-fin .juego-final{display:block} .juegofinnota{font-size:1.05rem;color:var(--soft)} .juegofinnota b{font-size:2.8rem;color:var(--gold-dk);display:block;line-height:1.1} .juego-final h3{margin:8px 0 4px;font-size:1.35rem} .juego-final p{margin:0 0 6px;color:var(--soft);font-size:.92rem} /* teclado del juego: sin nombres — encontrar la tecla ES el juego */ .juego-ayuda{text-align:center;margin:0 0 8px;font-size:.92rem;color:var(--soft)} .juegokb{position:relative;height:130px;user-select:none;touch-action:manipulation} .jk-blanca{position:absolute;top:0;bottom:0;background:#fff;border:1px solid #cfc9bb; border-radius:0 0 7px 7px;box-shadow:inset 0 -8px 10px -8px rgba(0,0,0,.35); cursor:pointer;padding:0} .jk-blanca:active{background:#f4efe4} .jk-blanca.jk-do{background:#fdeceb} .jk-blanca.bien{background:var(--ok);border-color:var(--ok)} .jk-blanca.mal{background:var(--red);border-color:var(--red)} .jk-blanca.pista{background:#dbe9fb;border-color:var(--rh);box-shadow:inset 0 0 0 3px var(--rh); animation:pistaparp .5s ease-in-out 3} @keyframes pistaparp{50%{background:#fff}} .jk-negra{position:absolute;top:0;height:60%;background:#34343c;border-radius:0 0 5px 5px; z-index:3;pointer-events:none} /* con los niveles 8–9 abiertos las negras son