.psj-app{--b:#4f7fe8;--bd:#264b96;--g:#78b84a;--ink:#17233d;position:relative;max-width:1180px;margin:30px auto;padding:26px;border-radius:28px;background:#fffaf0;color:var(--ink);font-family:inherit;box-shadow:0 14px 40px rgba(29,61,120,.12)}
.psj-app [hidden]{display:none!important}.psj-header{display:flex;justify-content:space-between;gap:20px}.psj-header h2{margin:0;font-size:clamp(30px,5vw,52px)}.psj-kicker{margin:0 0 5px;color:var(--b);font-weight:800}.psj-subtitle{margin:8px 0}.psj-total{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dfe5ee;border-radius:18px;padding:10px 16px;height:max-content}.psj-total>span{font-size:30px}.psj-total small,.psj-total strong{display:block}.psj-total strong{font-size:24px}
.psj-setup{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.psj-setup label{background:#fff;border:1px solid #dfe5ee;border-radius:15px;padding:11px 13px}.psj-setup select{display:block;margin-top:6px;border:1px solid #ccd6e4;border-radius:9px;padding:7px}.psj-checkrow{display:flex;gap:9px;align-items:flex-start}.psj-checkrow span,.psj-checkrow small{display:block}.psj-checkrow small{font-weight:400}
.psj-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}.psj-map button{position:relative;border:1px solid #d5ddeb;background:#fff;border-radius:15px;padding:12px 7px;min-height:74px;font-weight:700;cursor:pointer}.psj-map button.is-active{background:var(--b);color:#fff;border-color:var(--b)}.psj-map button.is-done{background:#edf8e9;border-color:#79bd4b;color:#2d6b24}.psj-map button.is-locked{opacity:.55;cursor:not-allowed}.psj-map small{display:block;margin-top:4px;font-weight:400}
.psj-stage{display:grid;grid-template-columns:145px 1fr 230px;gap:20px;align-items:center;background:linear-gradient(180deg,#cfefff,#eefaff);border-radius:24px;padding:24px}.psj-character{font-size:92px;text-align:center}.psj-center{text-align:center}.psj-center p{font-size:21px;margin:7px 0}.psj-badge{display:inline-block;background:#fff;border:1px solid #cbdcff;border-radius:999px;padding:5px 11px;color:var(--b);font-weight:800}.psj-target{font-size:52px;font-weight:900;color:var(--b);margin:8px 0}.psj-listen{border:0;border-radius:14px;background:#8b68d7;color:#fff;padding:13px 20px;font-weight:800;cursor:pointer}.psj-sequence{min-height:28px;margin-top:10px;font-weight:800}.psj-objective{background:#fff;border:2px solid #b7d3ff;border-radius:18px;padding:17px;display:flex;flex-direction:column;gap:8px}
.psj-progressline{display:flex;justify-content:space-between;margin-top:18px;font-size:14px}.psj-progress{height:11px;background:#e4e8ee;border-radius:99px;overflow:hidden;margin:7px 0 18px}.psj-progress span{display:block;height:100%;width:0;background:var(--g);transition:.3s}
.psj-keys{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.psj-key{min-height:180px;border:1px solid #d6d6d6;border-radius:16px;background:#fff;box-shadow:0 7px 0 #d5d5d5;cursor:pointer;transition:.12s}.psj-key:active,.psj-key.is-active,.psj-key.is-guide{transform:translateY(5px);box-shadow:0 2px 0 #ccc}.psj-key.is-guide{outline:4px solid #ffbd2e}.psj-key span{display:block;font-size:27px;font-weight:900;color:var(--b)}.psj-key small{display:block;font-size:40px;margin-top:15px}.psj-key.is-hidden span,.psj-key.is-hidden small{visibility:hidden}
.psj-direction,.psj-rhythm{text-align:center;margin:15px 0}.psj-direction button,.psj-rhythm button,.psj-song-picker button{border:1px solid #cbd6e4;background:#fff;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;margin:4px}.psj-drum{display:block!important;width:130px;height:130px;margin:12px auto!important;border-radius:50%!important;font-size:62px!important;background:#fff7df!important}.psj-drum.is-hit{transform:scale(.94)}.psj-song-picker{text-align:center;margin:15px 0}.psj-song-picker p{font-weight:800}
.psj-feedback{text-align:center;min-height:46px;margin:21px 0 10px;font-size:18px;font-weight:800}.psj-rewards{margin-top:20px}.psj-rewards h3{text-align:center}.psj-reward-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.psj-reward{background:#fff;border:1px solid #dfe5ed;border-radius:14px;padding:12px;text-align:center;opacity:.45}.psj-reward.is-earned{opacity:1;border-color:#e4b42e;background:#fff9df}.psj-reward span{display:block;font-size:30px}.psj-reward small{display:block;margin-top:4px}.psj-cta{display:block;max-width:520px;margin:24px auto 0;text-align:center;background:var(--b);color:#fff!important;text-decoration:none!important;border-radius:16px;padding:16px;font-weight:800}.psj-cta:hover{background:var(--bd)}
.psj-modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(23,35,61,.66);border-radius:28px;overflow:hidden}.psj-modal-card{position:relative;z-index:2;width:min(450px,100%);background:#fff;border-radius:24px;padding:28px;text-align:center;animation:psj-pop .38s ease-out}.psj-check{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#79bd4b;color:#fff;font-size:47px;font-weight:900}.psj-modal-stars{font-size:33px;letter-spacing:6px;margin:12px 0}.psj-modal button,.psj-diploma button{border:0;border-radius:13px;background:var(--b);color:#fff;padding:12px 18px;font-weight:800;cursor:pointer;margin:5px}.psj-secondary{background:#e8edf5!important;color:#263650!important}.psj-diploma-form label{display:block;text-align:left;margin:14px 0}.psj-diploma-form input{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #cad5e4;border-radius:10px;padding:11px}
.psj-diploma{position:relative;z-index:2;width:min(720px,100%);background:#fffdf4;border:12px double #d3ad3c;padding:34px;text-align:center}.psj-diploma p{letter-spacing:3px;font-weight:800}.psj-diploma h3{font-size:35px;margin:9px 0}.psj-diploma span,.psj-diploma strong{display:block}.psj-diploma strong{font-size:38px;color:var(--b);margin:18px 0}.psj-diploma div{font-size:30px;margin:18px}.psj-confetti{position:absolute;inset:0;background-image:radial-gradient(circle,#ffd54a 0 5px,transparent 6px),radial-gradient(circle,#ff6b6b 0 5px,transparent 6px),radial-gradient(circle,#67c8ff 0 5px,transparent 6px),radial-gradient(circle,#79bd4b 0 5px,transparent 6px);background-size:90px 90px,120px 120px,105px 105px,140px 140px;animation:psj-confetti 1.1s linear infinite}
@keyframes psj-pop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}@keyframes psj-confetti{from{transform:translateY(-22px)}to{transform:translateY(30px)}}
@media(max-width:900px){.psj-map{grid-template-columns:repeat(3,1fr)}.psj-stage{grid-template-columns:1fr}.psj-objective{display:none}.psj-keys{grid-template-columns:repeat(4,1fr)}.psj-key{min-height:140px}.psj-reward-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.psj-app{padding:15px;border-radius:18px}.psj-header{display:block}.psj-total{width:max-content;margin-top:12px}.psj-setup label{width:100%;box-sizing:border-box}.psj-setup select{width:100%}.psj-map{grid-template-columns:repeat(2,1fr)}.psj-keys{grid-template-columns:repeat(2,1fr)}}
@media print{body *{visibility:hidden!important}.psj-diploma,.psj-diploma *{visibility:visible!important}.psj-diploma{position:fixed;inset:20px;margin:auto}.psj-diploma button{display:none!important}}
@media(prefers-reduced-motion:reduce){.psj-modal-card,.psj-confetti{animation:none!important}}


/* v2.0.1: correcciones de desborde y optimización móvil */
.psj-app,
.psj-app *{
    box-sizing:border-box;
}
.psj-app{
    width:100%;
    max-width:1180px;
    overflow:hidden;
}
.psj-map{
    align-items:stretch;
}
.psj-map button{
    min-width:0;
    width:100%;
    height:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.22;
    font-size:15px;
    padding:12px 10px;
}
.psj-map button small{
    line-height:1.2;
}
.psj-stage,
.psj-stage > *,
.psj-center,
.psj-objective{
    min-width:0;
}
.psj-center p,
.psj-objective span,
.psj-feedback,
.psj-subtitle{
    overflow-wrap:anywhere;
}
.psj-keys{
    width:100%;
}
.psj-key{
    min-width:0;
    overflow:hidden;
}
.psj-key span{
    font-size:clamp(20px,2.3vw,27px);
}
.psj-key small{
    font-size:clamp(30px,3.5vw,40px);
}
.psj-setup > label{
    min-width:0;
}
.psj-setup select{
    max-width:100%;
}

@media (min-width:1100px){
    .psj-map{
        grid-template-columns:repeat(6,minmax(0,1fr));
    }
    .psj-map button{
        font-size:14px;
        padding:12px 7px;
    }
}

@media (max-width:900px){
    .psj-app{
        margin:18px auto;
        padding:18px;
        border-radius:20px;
    }
    .psj-header{
        align-items:flex-start;
    }
    .psj-map{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .psj-stage{
        grid-template-columns:1fr;
        gap:12px;
        padding:18px;
    }
    .psj-character{
        font-size:68px;
    }
    .psj-objective{
        display:block;
        text-align:center;
    }
    .psj-keys{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
    .psj-key{
        min-height:126px;
    }
    .psj-reward-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px){
    .psj-app{
        margin:10px 0;
        padding:12px;
        border-radius:16px;
    }
    .psj-header{
        display:block;
    }
    .psj-header h2{
        font-size:30px;
        line-height:1.1;
    }
    .psj-subtitle{
        font-size:15px;
    }
    .psj-total{
        width:100%;
        justify-content:center;
        margin-top:12px;
    }
    .psj-setup{
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
        margin:16px 0;
    }
    .psj-setup label{
        width:100%;
        padding:10px;
    }
    .psj-setup select{
        width:100%;
        font-size:16px;
    }
    .psj-map{
        grid-template-columns:1fr;
        gap:8px;
    }
    .psj-map button{
        min-height:62px;
        text-align:left;
        padding:12px 14px;
        font-size:16px;
    }
    .psj-map button small{
        margin-left:27px;
    }
    .psj-stage{
        padding:15px 12px;
        border-radius:18px;
    }
    .psj-character{
        font-size:58px;
    }
    .psj-center p{
        font-size:18px;
        line-height:1.3;
    }
    .psj-target{
        font-size:44px;
    }
    .psj-listen{
        width:100%;
        min-height:48px;
        font-size:16px;
    }
    .psj-progressline{
        gap:10px;
        font-size:13px;
    }
    .psj-keys{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }
    .psj-key{
        min-height:112px;
        border-radius:13px;
    }
    .psj-key span{
        font-size:23px;
    }
    .psj-key small{
        font-size:32px;
        margin-top:8px;
    }
    .psj-direction{
        display:grid;
        grid-template-columns:1fr;
        gap:7px;
    }
    .psj-direction button,
    .psj-rhythm button,
    .psj-song-picker button{
        width:100%;
        margin:0;
        min-height:48px;
        font-size:16px;
    }
    .psj-song-picker > div{
        display:grid;
        grid-template-columns:1fr;
        gap:7px;
    }
    .psj-rhythm{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
    .psj-drum{
        width:118px!important;
        height:118px!important;
        justify-self:center;
    }
    .psj-feedback{
        font-size:16px;
        line-height:1.35;
    }
    .psj-reward-grid{
        grid-template-columns:1fr;
    }
    .psj-modal{
        position:fixed;
        inset:0;
        border-radius:0;
        padding:12px;
        overflow-y:auto;
    }
    .psj-modal-card,
    .psj-diploma{
        max-height:calc(100vh - 24px);
        overflow-y:auto;
    }
    .psj-diploma{
        padding:20px 14px;
        border-width:7px;
    }
    .psj-diploma h3{
        font-size:27px;
    }
    .psj-diploma strong{
        font-size:30px;
    }
}

@media (max-width:360px){
    .psj-app{
        padding:9px;
    }
    .psj-map button{
        font-size:15px;
    }
    .psj-key{
        min-height:100px;
    }
}