.pkpg-v30{
    --g:#568f73;
    --gd:#2f654d;
    --ink:#173d2d;
    --soft:#eef6f1;
    --cream:#fffdf8;
    --danger:#d96d63;
    font-family:inherit!important;
    box-sizing:border-box!important;
}
.pkpg-v30 *,.pkpg-v30 *::before,.pkpg-v30 *::after{box-sizing:border-box!important}

.pkpg-v30.pkpg-floating{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:flex-end!important;
    gap:12px!important;
    z-index:2147483000!important;
    overflow:visible!important;
}
.pkpg-v30.pkpg-inline{position:relative!important;display:inline-flex!important;align-items:flex-end!important}

.pkpg-v30 .pkpg-character{
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:0!important;
    margin:0!important;
    cursor:pointer!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:5px!important;
    min-width:104px!important;
}
.pkpg-v30 .pkpg-mascot-stage{position:relative!important;width:100px!important;height:108px!important;display:block!important}
.pkpg-v30 .pkpg-mascot{position:absolute!important;inset:0!important;display:none!important;transform-origin:center bottom!important}
.pkpg-v30 .pkpg-mascot.is-active{display:block!important}

/* DOG */
.pkpg-v30 .pkpg-dog .pkpg-head{
    position:absolute!important;left:18px!important;top:8px!important;width:62px!important;height:58px!important;
    background:#d6a06d!important;border-radius:48%!important;z-index:3!important
}
.pkpg-v30 .pkpg-dog .pkpg-ear{
    position:absolute!important;top:8px!important;width:25px!important;height:45px!important;background:#9f643d!important;
    border-radius:55%!important;z-index:2!important;transform-origin:top center!important
}
.pkpg-v30 .pkpg-dog .pkpg-ear-l{left:11px!important;transform:rotate(22deg)}
.pkpg-v30 .pkpg-dog .pkpg-ear-r{right:11px!important;transform:rotate(-22deg)}
.pkpg-v30 .pkpg-dog .pkpg-eye{
    position:absolute!important;top:22px!important;width:7px!important;height:8px!important;background:#20372d!important;border-radius:50%!important
}
.pkpg-v30 .pkpg-dog .pkpg-eye-l{left:17px!important}.pkpg-v30 .pkpg-dog .pkpg-eye-r{right:17px!important}
.pkpg-v30 .pkpg-dog .pkpg-muzzle{
    position:absolute!important;left:19px!important;bottom:8px!important;width:25px!important;height:17px!important;background:#ecd0ae!important;border-radius:50%!important
}
.pkpg-v30 .pkpg-dog .pkpg-nose{
    position:absolute!important;left:28px!important;bottom:18px!important;width:8px!important;height:6px!important;background:#20372d!important;border-radius:50%!important
}
.pkpg-v30 .pkpg-dog .pkpg-mouth{
    position:absolute!important;left:29px!important;bottom:9px!important;width:9px!important;height:5px!important;border-bottom:2px solid #6c4230!important;border-radius:50%!important
}
.pkpg-v30 .pkpg-dog .pkpg-body{
    position:absolute!important;left:26px!important;bottom:4px!important;width:47px!important;height:54px!important;background:#c88e5c!important;border-radius:45%!important
}
.pkpg-v30 .pkpg-dog .pkpg-tail{
    position:absolute!important;right:3px!important;bottom:30px!important;width:40px!important;height:12px!important;background:#9f643d!important;
    border-radius:999px!important;transform:rotate(-28deg);transform-origin:left center!important
}
.pkpg-v30 .pkpg-dog .pkpg-paw{position:absolute!important;left:39px!important;bottom:22px!important;font-size:18px!important;z-index:5!important}

/* CAT */
.pkpg-v30 .pkpg-cat-head{
    position:absolute!important;left:18px!important;top:12px!important;width:62px!important;height:55px!important;
    background:#c7a47d!important;border-radius:46% 46% 52% 52%!important;z-index:3!important
}
.pkpg-v30 .pkpg-cat-ear{
    position:absolute!important;top:3px!important;width:28px!important;height:32px!important;background:#b78e65!important;
    clip-path:polygon(50% 0,100% 100%,0 100%)!important;z-index:2!important
}
.pkpg-v30 .pkpg-cat-ear-l{left:17px!important;transform:rotate(-8deg)}
.pkpg-v30 .pkpg-cat-ear-r{right:17px!important;transform:rotate(8deg)}
.pkpg-v30 .pkpg-cat-eye{
    position:absolute!important;top:22px!important;width:9px!important;height:10px!important;background:#234236!important;border-radius:50%!important
}
.pkpg-v30 .pkpg-cat-eye::after{content:""!important;position:absolute!important;left:3px!important;top:1px!important;width:2px!important;height:8px!important;background:#f3d66f!important;border-radius:2px!important}
.pkpg-v30 .pkpg-cat-eye-l{left:16px!important}.pkpg-v30 .pkpg-cat-eye-r{right:16px!important}
.pkpg-v30 .pkpg-cat-nose{position:absolute!important;left:28px!important;bottom:15px!important;width:7px!important;height:5px!important;background:#b76f6f!important;clip-path:polygon(0 0,100% 0,50% 100%)!important}
.pkpg-v30 .pkpg-cat-mouth{position:absolute!important;left:27px!important;bottom:8px!important;width:10px!important;height:6px!important;border-bottom:2px solid #745347!important;border-radius:50%!important}
.pkpg-v30 .pkpg-cat-body{position:absolute!important;left:28px!important;bottom:3px!important;width:45px!important;height:52px!important;background:#b99169!important;border-radius:48%!important}
.pkpg-v30 .pkpg-cat-tail{
    position:absolute!important;right:2px!important;bottom:18px!important;width:14px!important;height:55px!important;border:10px solid #9f7957!important;
    border-left-color:transparent!important;border-bottom-color:transparent!important;border-radius:50%!important;transform:rotate(24deg)!important;transform-origin:bottom center!important
}
.pkpg-v30 .pkpg-whisker{position:absolute!important;width:24px!important;height:1px!important;background:#6c5d53!important;bottom:13px!important;z-index:4!important}
.pkpg-v30 .pkpg-whisker-1{left:-14px!important;transform:rotate(8deg)}
.pkpg-v30 .pkpg-whisker-2{left:-14px!important;bottom:9px!important;transform:rotate(-8deg)}
.pkpg-v30 .pkpg-whisker-3{right:-14px!important;transform:rotate(-8deg)}
.pkpg-v30 .pkpg-whisker-4{right:-14px!important;bottom:9px!important;transform:rotate(8deg)}

.pkpg-v30 .pkpg-badge{
    display:block!important;background:var(--soft)!important;color:var(--gd)!important;border:1px solid #dfeae3!important;
    font-weight:800!important;font-size:12px!important;padding:6px 10px!important;border-radius:999px!important;
    box-shadow:0 5px 16px rgba(23,61,45,.08)!important;white-space:nowrap!important
}

.pkpg-v30 .pkpg-panel{
    position:absolute!important;right:116px!important;bottom:8px!important;width:380px!important;max-width:calc(100vw - 170px)!important;
    background:var(--cream)!important;border:1px solid #dfe8e2!important;border-radius:20px!important;
    box-shadow:0 18px 45px rgba(23,61,45,.18)!important;padding:18px!important;margin:0!important;
    z-index:2147483001!important;overflow:visible!important
}
.pkpg-v30 .pkpg-panel[hidden],.pkpg-v30 .pkpg-screen[hidden],.pkpg-v30 .pkpg-dynamic[hidden],.pkpg-v30 .pkpg-loading[hidden],.pkpg-v30 .pkpg-result[hidden],.pkpg-v30 .pkpg-link[hidden]{display:none!important}
.pkpg-v30 .pkpg-panel::after{
    content:""!important;position:absolute!important;right:-9px!important;bottom:34px!important;width:17px!important;height:17px!important;
    background:var(--cream)!important;border-right:1px solid #dfe8e2!important;border-top:1px solid #dfe8e2!important;transform:rotate(45deg)!important
}
.pkpg-v30 .pkpg-panel-close,.pkpg-v30 .pkpg-close-all{
    appearance:none!important;color:#6c786f!important;cursor:pointer!important;line-height:1!important
}
.pkpg-v30 .pkpg-panel-close{
    position:absolute!important;right:10px!important;top:8px!important;border:0!important;background:transparent!important;font-size:22px!important;padding:2px!important
}
.pkpg-v30 .pkpg-close-all{
    position:absolute!important;right:-4px!important;top:-8px!important;width:24px!important;height:24px!important;border-radius:50%!important;
    background:#fff!important;border:1px solid #dfe8e2!important;font-size:17px!important;box-shadow:0 4px 12px rgba(0,0,0,.08)!important;z-index:2147483002!important;padding:0!important
}
.pkpg-v30 .pkpg-hello,.pkpg-v30 .pkpg-kicker{
    font-weight:900!important;color:var(--g)!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.04em!important
}
.pkpg-v30 .pkpg-screen h3{margin:7px 25px 14px 0!important;color:var(--ink)!important;font-size:19px!important;line-height:1.3!important}
.pkpg-v30 .pkpg-mascot-choice-grid,.pkpg-v30 .pkpg-choice-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.pkpg-v30 .pkpg-mascot-choice,.pkpg-v30 .pkpg-choice{
    appearance:none!important;border:1px solid #dce9e1!important;background:#f4f9f6!important;border-radius:13px!important;padding:16px 10px!important;
    color:var(--ink)!important;font-weight:800!important;cursor:pointer!important;transition:.18s ease!important
}
.pkpg-v30 .pkpg-mascot-choice:hover,.pkpg-v30 .pkpg-choice:hover{transform:translateY(-2px)!important;border-color:var(--g)!important}
.pkpg-v30 .pkpg-choice-icon,.pkpg-v30 .pkpg-choice span{display:block!important;font-size:28px!important;margin-bottom:5px!important}
.pkpg-v30 .pkpg-screen-top,.pkpg-v30 .pkpg-content-top{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:10px!important}
.pkpg-v30 .pkpg-change-mascot,.pkpg-v30 .pkpg-back-home{
    appearance:none!important;border:0!important;background:transparent!important;color:var(--gd)!important;font-weight:800!important;padding:0!important;cursor:pointer!important;font-size:12px!important
}
.pkpg-v30 .pkpg-maintext,.pkpg-v30 .pkpg-question{
    color:var(--ink)!important;font-size:17px!important;line-height:1.45!important;font-weight:750!important;margin-top:8px!important
}
.pkpg-v30 .pkpg-answers{display:grid!important;gap:8px!important;margin-top:14px!important}
.pkpg-v30 .pkpg-answer{
    appearance:none!important;border:1px solid #dae7df!important;background:#f7fbf8!important;border-radius:10px!important;padding:10px 12px!important;
    text-align:left!important;color:#294d3d!important;font-weight:700!important;cursor:pointer!important;transition:.16s ease!important
}
.pkpg-v30 .pkpg-answer:hover{transform:translateX(2px)!important;border-color:var(--g)!important}
.pkpg-v30 .pkpg-answer.is-correct{background:#e3f4e8!important;border-color:#6baa7b!important}
.pkpg-v30 .pkpg-answer.is-wrong{background:#fff0ed!important;border-color:#d98a80!important}
.pkpg-v30 .pkpg-result{margin-top:13px!important;padding-top:12px!important;border-top:1px solid #e1e8e3!important;color:#5f6d64!important;font-size:14px!important;line-height:1.5!important}
.pkpg-v30 .pkpg-result-title{font-weight:900!important;color:var(--ink)!important;font-size:16px!important}
.pkpg-v30 .pkpg-result p{margin:5px 0 0!important}
.pkpg-v30 .pkpg-actions{display:flex!important;gap:8px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:13px!important}
.pkpg-v30 .pkpg-link,.pkpg-v30 .pkpg-next{
    appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;
    padding:9px 13px!important;border-radius:9px!important;font-weight:800!important;cursor:pointer!important;font-size:13px!important
}
.pkpg-v30 .pkpg-link{background:var(--gd)!important;color:#fff!important;border:1px solid var(--gd)!important}
.pkpg-v30 .pkpg-next{background:#f4f9f6!important;color:var(--gd)!important;border:1px solid #dce9e1!important}
.pkpg-v30 .pkpg-loading{padding:16px!important;text-align:center!important;color:#647269!important}
.pkpg-v30 .pkpg-reaction{
    position:absolute!important;right:18px!important;bottom:-38px!important;background:#fff!important;border:1px solid #dfe8e2!important;border-radius:999px!important;
    padding:7px 12px!important;font-size:12px!important;font-weight:800!important;color:var(--ink)!important;box-shadow:0 8px 20px rgba(0,0,0,.08)!important;
    opacity:0!important;transform:translateY(5px)!important;pointer-events:none!important;transition:.2s ease!important
}
.pkpg-v30 .pkpg-reaction.is-visible{opacity:1!important;transform:none!important}

/* idle + hover */
@keyframes pkpg-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.01)}}
@keyframes pkpg-wag{from{transform:rotate(-42deg)}to{transform:rotate(10deg)}}
@keyframes pkpg-cat-tail{from{transform:rotate(17deg)}to{transform:rotate(34deg)}}
@keyframes pkpg-blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes pkpg-correct{0%{transform:translateY(0)}30%{transform:translateY(-13px) rotate(-4deg)}60%{transform:translateY(-4px) rotate(3deg)}100%{transform:translateY(0)}}
@keyframes pkpg-wrong{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes pkpg-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

.pkpg-v30 .pkpg-mascot.is-active{animation:pkpg-breathe 3.2s ease-in-out infinite!important}
.pkpg-v30 .pkpg-character:hover .pkpg-dog .pkpg-tail{animation:pkpg-wag .28s infinite alternate!important}
.pkpg-v30 .pkpg-character:hover .pkpg-cat .pkpg-cat-tail{animation:pkpg-cat-tail .38s infinite alternate!important}
.pkpg-v30 .pkpg-character:hover .pkpg-eye,.pkpg-v30 .pkpg-character:hover .pkpg-cat-eye{animation:pkpg-blink 1.7s infinite!important}
.pkpg-v30.is-correct .pkpg-mascot.is-active{animation:pkpg-correct .7s ease!important}
.pkpg-v30.is-correct .pkpg-dog .pkpg-tail{animation:pkpg-wag .12s 6 alternate!important}
.pkpg-v30.is-correct .pkpg-cat .pkpg-cat-tail{animation:pkpg-cat-tail .16s 5 alternate!important}
.pkpg-v30.is-wrong .pkpg-mascot.is-active{animation:pkpg-wrong .55s ease!important}
.pkpg-v30.is-open .pkpg-panel{animation:pkpg-pop .18s ease!important}

@media(max-width:700px){
    .pkpg-v30.pkpg-floating{right:12px!important;bottom:18px!important}
    .pkpg-v30 .pkpg-mascot-stage{transform:scale(.8)!important;transform-origin:center bottom!important;margin-bottom:-14px!important}
    .pkpg-v30 .pkpg-badge{font-size:10px!important;padding:5px 8px!important}
    .pkpg-v30 .pkpg-panel{
        position:fixed!important;left:12px!important;right:12px!important;bottom:112px!important;width:auto!important;max-width:none!important
    }
    .pkpg-v30 .pkpg-panel::after{display:none!important}
}
@media(prefers-reduced-motion:reduce){
    .pkpg-v30 .pkpg-mascot,.pkpg-v30 .pkpg-tail,.pkpg-v30 .pkpg-cat-tail,.pkpg-v30 .pkpg-eye,.pkpg-v30 .pkpg-cat-eye{
        animation:none!important;transition:none!important
    }
}


/* v3.2 points + daily quiz */
.pkpg-v30 .pkpg-player-stats{
    display:flex!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 12px!important;
}
.pkpg-v30 .pkpg-player-stats > span{
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:6px 9px!important;
    background:#f4f9f6!important;
    border:1px solid #dfeae3!important;
    border-radius:999px!important;
    color:#345646!important;
    font-size:12px!important;
}
.pkpg-v30 .pkpg-daily-start{
    appearance:none!important;
    width:100%!important;
    margin-top:10px!important;
    border:1px solid #d6e5db!important;
    background:linear-gradient(135deg,#f4f9f6,#fff9ea)!important;
    color:var(--ink)!important;
    border-radius:14px!important;
    padding:12px 14px!important;
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    text-align:left!important;
    cursor:pointer!important;
}
.pkpg-v30 .pkpg-daily-start > span:first-child{font-size:28px!important}
.pkpg-v30 .pkpg-daily-start strong{display:block!important;font-size:14px!important}
.pkpg-v30 .pkpg-daily-start small{display:block!important;margin-top:2px!important;color:#748078!important;font-size:11px!important}
.pkpg-v30 .pkpg-daily-start:hover{border-color:var(--g)!important;transform:translateY(-1px)!important}
.pkpg-v30 .pkpg-daily-done{
    margin-top:10px!important;
    padding:10px 12px!important;
    border-radius:11px!important;
    background:#eef6f1!important;
    color:#43604f!important;
    font-size:12px!important;
    line-height:1.45!important;
}
.pkpg-v30 .pkpg-daily-progress{
    padding:5px 9px!important;
    background:#eef6f1!important;
    color:var(--gd)!important;
    border-radius:999px!important;
    font-size:12px!important;
    font-weight:900!important;
}
.pkpg-v30 .pkpg-daily-question{
    color:var(--ink)!important;
    font-size:17px!important;
    line-height:1.45!important;
    font-weight:800!important;
    margin:9px 0 13px!important;
}
.pkpg-v30 .pkpg-daily-answers{display:grid!important;gap:8px!important}
.pkpg-v30 .pkpg-daily-answer{
    appearance:none!important;
    border:1px solid #dae7df!important;
    background:#f7fbf8!important;
    color:#294d3d!important;
    border-radius:10px!important;
    padding:10px 12px!important;
    text-align:left!important;
    font-weight:700!important;
    cursor:pointer!important;
}
.pkpg-v30 .pkpg-daily-answer.is-correct{background:#e3f4e8!important;border-color:#6baa7b!important}
.pkpg-v30 .pkpg-daily-answer.is-wrong{background:#fff0ed!important;border-color:#d98a80!important}
.pkpg-v30 .pkpg-daily-feedback{
    margin-top:13px!important;
    padding-top:12px!important;
    border-top:1px solid #e1e8e3!important;
}
.pkpg-v30 .pkpg-daily-feedback p{margin:6px 0 10px!important;color:#617067!important;font-size:13px!important;line-height:1.45!important}
.pkpg-v30 .pkpg-daily-next,
.pkpg-v30 .pkpg-summary-home{
    appearance:none!important;
    border:1px solid var(--gd)!important;
    background:var(--gd)!important;
    color:#fff!important;
    padding:9px 13px!important;
    border-radius:9px!important;
    font-weight:800!important;
    cursor:pointer!important;
}
.pkpg-v30 .pkpg-daily-summary{text-align:center!important;padding:8px 4px 2px!important}
.pkpg-v30 .pkpg-summary-icon{font-size:42px!important}
.pkpg-v30 .pkpg-daily-summary h3{margin:4px 0!important}
.pkpg-v30 .pkpg-summary-score{font-size:34px!important;font-weight:900!important;color:var(--gd)!important;margin:8px 0!important}
.pkpg-v30 .pkpg-summary-text{color:#617067!important;font-size:14px!important;line-height:1.5!important}
.pkpg-v30 .pkpg-summary-reward{
    display:inline-flex!important;
    margin:4px 0 14px!important;
    padding:7px 12px!important;
    background:#fff6d8!important;
    border:1px solid #eedc97!important;
    color:#6d5a19!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:900!important;
}


/* v3.3 account sync */
.pkpg-v30 .pkpg-account-state{
    margin:-4px 0 10px!important;
    color:#718078!important;
    font-size:10.5px!important;
    line-height:1.35!important;
}


/* v3.4 achievements */
.pkpg-v30 .pkpg-achievements-open{
    appearance:none!important;
    width:100%!important;
    margin:0 0 10px!important;
    border:1px solid #e6ddbd!important;
    background:linear-gradient(135deg,#fffaf0,#f6fbf7)!important;
    color:var(--ink)!important;
    border-radius:13px!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    text-align:left!important;
    cursor:pointer!important;
}
.pkpg-v30 .pkpg-achievements-open>span:first-child{font-size:24px!important}
.pkpg-v30 .pkpg-achievements-open strong{display:block!important;font-size:13px!important}
.pkpg-v30 .pkpg-achievements-open small{display:block!important;font-size:10.5px!important;color:#778078!important;margin-top:2px!important}
.pkpg-v30 .pkpg-achievements-total{
    padding:5px 9px!important;
    border-radius:999px!important;
    background:#fff7df!important;
    border:1px solid #eadba8!important;
    color:#6c5a1a!important;
    font-size:12px!important;
    font-weight:900!important;
}
.pkpg-v30 .pkpg-achievement-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin-top:12px!important;
}
.pkpg-v30 .pkpg-achievement-card{
    min-height:82px!important;
    border-radius:12px!important;
    padding:11px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    border:1px solid #dfe8e2!important;
}
.pkpg-v30 .pkpg-achievement-card.is-unlocked{
    background:linear-gradient(135deg,#fff9e7,#f2f8f4)!important;
    border-color:#e3d69c!important;
}
.pkpg-v30 .pkpg-achievement-card.is-locked{
    background:#f6f7f6!important;
    opacity:.68!important;
    filter:grayscale(.65)!important;
}
.pkpg-v30 .pkpg-achievement-icon{font-size:26px!important;line-height:1!important}
.pkpg-v30 .pkpg-achievement-card strong{
    display:block!important;
    color:var(--ink)!important;
    font-size:12px!important;
    line-height:1.25!important;
}
.pkpg-v30 .pkpg-achievement-card small{
    display:block!important;
    margin-top:3px!important;
    color:#748078!important;
    font-size:10px!important;
    line-height:1.35!important;
}
.pkpg-v30 .pkpg-achievement-toast{
    position:fixed!important;
    right:24px!important;
    bottom:160px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:220px!important;
    max-width:300px!important;
    padding:11px 13px!important;
    background:#fffdf7!important;
    border:1px solid #e3d69c!important;
    border-radius:13px!important;
    box-shadow:0 14px 36px rgba(23,61,45,.18)!important;
    opacity:0!important;
    transform:translateY(12px) scale(.97)!important;
    pointer-events:none!important;
    transition:.25s ease!important;
    z-index:2147483005!important;
}
.pkpg-v30 .pkpg-achievement-toast.is-visible{
    opacity:1!important;
    transform:none!important;
}
.pkpg-v30 .pkpg-achievement-toast-icon{font-size:28px!important}
.pkpg-v30 .pkpg-achievement-toast strong{display:block!important;color:var(--gd)!important;font-size:11px!important;text-transform:uppercase!important}
.pkpg-v30 .pkpg-achievement-toast small{display:block!important;color:var(--ink)!important;font-size:13px!important;font-weight:800!important;margin-top:2px!important}

@media(max-width:700px){
    .pkpg-v30 .pkpg-achievement-grid{grid-template-columns:1fr!important}
    .pkpg-v30 .pkpg-achievement-toast{
        left:12px!important;
        right:12px!important;
        bottom:112px!important;
        max-width:none!important;
    }
}


/* ==========================================================
   v3.5 – richer mascot animation system
   ========================================================== */

.pkpg-v30 .pkpg-mascot-stage{
    perspective:420px!important;
}

.pkpg-v30 .pkpg-mascot{
    will-change:transform!important;
}

/* softer living idle */
@keyframes pkpg-idle-dog{
    0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
    25%{transform:translateY(-1px) rotate(-.6deg) scale(1.005)}
    50%{transform:translateY(-3px) rotate(.4deg) scale(1.012)}
    75%{transform:translateY(-1px) rotate(.2deg) scale(1.004)}
}
@keyframes pkpg-idle-cat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    35%{transform:translateY(-2px) rotate(.6deg)}
    70%{transform:translateY(-1px) rotate(-.5deg)}
}

.pkpg-v30 .pkpg-dog.is-active{
    animation:pkpg-idle-dog 3.8s ease-in-out infinite!important;
}
.pkpg-v30 .pkpg-cat.is-active{
    animation:pkpg-idle-cat 4.4s ease-in-out infinite!important;
}

/* dog hover: head tilt + fast tail */
@keyframes pkpg-dog-head-tilt{
    0%,100%{transform:rotate(0deg)}
    45%{transform:rotate(-8deg) translateY(-1px)}
    70%{transform:rotate(-5deg)}
}
.pkpg-v30 .pkpg-character:hover .pkpg-dog .pkpg-head{
    animation:pkpg-dog-head-tilt .75s ease!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-dog .pkpg-tail{
    animation:pkpg-wag .16s 8 alternate!important;
}

/* cat hover: ears perk + tail curl */
@keyframes pkpg-cat-ear-perk-left{
    0%,100%{transform:rotate(-8deg)}
    45%{transform:rotate(-16deg) translateY(-2px)}
}
@keyframes pkpg-cat-ear-perk-right{
    0%,100%{transform:rotate(8deg)}
    45%{transform:rotate(16deg) translateY(-2px)}
}
@keyframes pkpg-cat-tail-curl{
    0%,100%{transform:rotate(24deg) scaleY(1)}
    50%{transform:rotate(44deg) scaleY(1.05)}
}
.pkpg-v30 .pkpg-character:hover .pkpg-cat-ear-l{
    animation:pkpg-cat-ear-perk-left .6s ease!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-cat-ear-r{
    animation:pkpg-cat-ear-perk-right .6s ease!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-cat-tail{
    animation:pkpg-cat-tail-curl .7s ease-in-out infinite!important;
}

/* click / attention reaction */
@keyframes pkpg-attention{
    0%{transform:translateY(0) scale(1)}
    35%{transform:translateY(-8px) scale(1.045)}
    65%{transform:translateY(-3px) scale(.99)}
    100%{transform:translateY(0) scale(1)}
}
.pkpg-v30.is-attention .pkpg-mascot.is-active{
    animation:pkpg-attention .48s cubic-bezier(.2,.8,.2,1)!important;
}

/* dog positive reaction */
@keyframes pkpg-dog-celebrate{
    0%{transform:translateY(0) rotate(0deg)}
    20%{transform:translateY(-14px) rotate(-4deg)}
    40%{transform:translateY(-5px) rotate(4deg)}
    60%{transform:translateY(-11px) rotate(-2deg)}
    80%{transform:translateY(-2px) rotate(2deg)}
    100%{transform:translateY(0) rotate(0deg)}
}
.pkpg-v30.is-correct .pkpg-dog.is-active{
    animation:pkpg-dog-celebrate .9s cubic-bezier(.2,.8,.2,1)!important;
}
.pkpg-v30.is-correct .pkpg-dog .pkpg-tail{
    animation:pkpg-wag .1s 10 alternate!important;
}

/* cat positive reaction: proud stretch */
@keyframes pkpg-cat-proud{
    0%{transform:translateY(0) scale(1)}
    28%{transform:translateY(-8px) scale(1.03,1.08)}
    55%{transform:translateY(-5px) rotate(2deg)}
    100%{transform:translateY(0) scale(1)}
}
.pkpg-v30.is-correct .pkpg-cat.is-active{
    animation:pkpg-cat-proud .85s ease!important;
}
.pkpg-v30.is-correct .pkpg-cat .pkpg-cat-tail{
    animation:pkpg-cat-tail-curl .18s 5 alternate!important;
}

/* wrong answer: distinct reactions */
@keyframes pkpg-dog-confused{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(-7deg) translateY(-2px)}
    55%{transform:rotate(7deg)}
    78%{transform:rotate(-3deg)}
}
@keyframes pkpg-cat-unimpressed{
    0%,100%{transform:translateX(0) rotate(0)}
    30%{transform:translateX(-3px) rotate(-2deg)}
    55%{transform:translateX(3px) rotate(2deg)}
    75%{transform:translateX(-1px) rotate(-1deg)}
}
.pkpg-v30.is-wrong .pkpg-dog.is-active{
    animation:pkpg-dog-confused .7s ease!important;
}
.pkpg-v30.is-wrong .pkpg-cat.is-active{
    animation:pkpg-cat-unimpressed .62s ease!important;
}

/* thinking/loading states */
@keyframes pkpg-thinking-dog{
    0%,100%{transform:rotate(0deg)}
    50%{transform:rotate(-6deg) translateY(-2px)}
}
@keyframes pkpg-thinking-cat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-2px)}
}
.pkpg-v30.is-thinking .pkpg-dog .pkpg-head{
    animation:pkpg-thinking-dog 1.1s ease-in-out infinite!important;
}
.pkpg-v30.is-thinking .pkpg-cat .pkpg-cat-head{
    animation:pkpg-thinking-cat 1.25s ease-in-out infinite!important;
}
.pkpg-v30.is-thinking .pkpg-eye,
.pkpg-v30.is-thinking .pkpg-cat-eye{
    animation:pkpg-blink 1.35s ease-in-out infinite!important;
}

/* occasional ambient actions triggered by JS */
@keyframes pkpg-dog-sniff{
    0%,100%{transform:translateY(0) rotate(0)}
    35%{transform:translateY(5px) rotate(3deg)}
    65%{transform:translateY(3px) rotate(-2deg)}
}
.pkpg-v30.is-ambient-sniff .pkpg-dog .pkpg-head{
    animation:pkpg-dog-sniff 1s ease!important;
}
@keyframes pkpg-cat-look{
    0%,100%{transform:translateX(0)}
    35%{transform:translateX(-3px) rotate(-2deg)}
    70%{transform:translateX(2px) rotate(2deg)}
}
.pkpg-v30.is-ambient-look .pkpg-cat .pkpg-cat-head{
    animation:pkpg-cat-look 1s ease!important;
}

/* mascot switch transition */
@keyframes pkpg-mascot-in{
    from{opacity:0;transform:translateY(8px) scale(.88)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.pkpg-v30 .pkpg-mascot.is-entering{
    animation:pkpg-mascot-in .38s cubic-bezier(.2,.8,.2,1)!important;
}

/* panel opening feels attached to mascot */
@keyframes pkpg-panel-in{
    from{opacity:0;transform:translateX(8px) translateY(4px) scale(.975)}
    to{opacity:1;transform:none}
}
.pkpg-v30.is-open .pkpg-panel{
    animation:pkpg-panel-in .22s cubic-bezier(.2,.8,.2,1)!important;
}

/* floating particles/emotes */
.pkpg-v30 .pkpg-fx-layer{
    position:absolute!important;
    right:22px!important;
    bottom:84px!important;
    width:110px!important;
    height:100px!important;
    pointer-events:none!important;
    z-index:2147483004!important;
    overflow:visible!important;
}
.pkpg-v30 .pkpg-fx{
    position:absolute!important;
    left:50%!important;
    bottom:8px!important;
    font-size:19px!important;
    opacity:0!important;
    transform:translate(-50%,0) scale(.7)!important;
    animation:pkpg-float-fx 1.15s ease-out forwards!important;
}
@keyframes pkpg-float-fx{
    0%{opacity:0;transform:translate(-50%,4px) scale(.65) rotate(0)}
    18%{opacity:1}
    100%{opacity:0;transform:translate(calc(-50% + var(--drift,0px)),-72px) scale(1.15) rotate(var(--rot,0deg))}
}

/* subtle button micro-interactions */
.pkpg-v30 .pkpg-choice,
.pkpg-v30 .pkpg-mascot-choice,
.pkpg-v30 .pkpg-daily-start,
.pkpg-v30 .pkpg-achievements-open{
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.pkpg-v30 .pkpg-choice:active,
.pkpg-v30 .pkpg-mascot-choice:active,
.pkpg-v30 .pkpg-daily-start:active,
.pkpg-v30 .pkpg-achievements-open:active{
    transform:scale(.985)!important;
}

/* selected mascot card feedback */
.pkpg-v30 .pkpg-mascot-choice.is-selected{
    border-color:var(--g)!important;
    box-shadow:0 0 0 3px rgba(86,143,115,.12)!important;
    background:#eef7f1!important;
}

/* reduced motion remains respected */
@media(prefers-reduced-motion:reduce){
    .pkpg-v30 .pkpg-mascot,
    .pkpg-v30 .pkpg-head,
    .pkpg-v30 .pkpg-cat-head,
    .pkpg-v30 .pkpg-tail,
    .pkpg-v30 .pkpg-cat-tail,
    .pkpg-v30 .pkpg-ear,
    .pkpg-v30 .pkpg-cat-ear,
    .pkpg-v30 .pkpg-eye,
    .pkpg-v30 .pkpg-cat-eye,
    .pkpg-v30 .pkpg-panel,
    .pkpg-v30 .pkpg-fx{
        animation:none!important;
        transition:none!important;
    }
}


/* ==========================================================
   v3.6 – true inline SVG brand mascots
   ========================================================== */
.pkpg-v30 .pkpg-mascot-stage{
    width:108px!important;
    height:116px!important;
}
.pkpg-v30 .pkpg-mascot{
    width:108px!important;
    height:116px!important;
}
.pkpg-v30 .pkpg-svg{
    display:block!important;
    width:108px!important;
    height:116px!important;
    overflow:visible!important;
}

/* Hide legacy CSS-shape styling effects from v3.x. */
.pkpg-v30 .pkpg-svg .pkpg-dog-head,
.pkpg-v30 .pkpg-svg .pkpg-cat-head,
.pkpg-v30 .pkpg-svg .pkpg-dog-tail,
.pkpg-v30 .pkpg-svg .pkpg-cat-tail,
.pkpg-v30 .pkpg-svg .pkpg-dog-paw,
.pkpg-v30 .pkpg-svg .pkpg-cat-paw,
.pkpg-v30 .pkpg-svg .pkpg-dog-ear,
.pkpg-v30 .pkpg-svg .pkpg-cat-ear,
.pkpg-v30 .pkpg-svg .pkpg-dog-eye,
.pkpg-v30 .pkpg-svg .pkpg-cat-eye{
    transform-box:fill-box!important;
    transform-origin:center!important;
}

/* neutral/happy/sad facial states */
.pkpg-v30 .pkpg-mouth-happy,
.pkpg-v30 .pkpg-mouth-sad{
    opacity:0!important;
}
.pkpg-v30.is-correct .pkpg-mouth-neutral{
    opacity:0!important;
}
.pkpg-v30.is-correct .pkpg-mouth-happy{
    opacity:1!important;
}
.pkpg-v30.is-wrong .pkpg-mouth-neutral{
    opacity:0!important;
}
.pkpg-v30.is-wrong .pkpg-mouth-sad{
    opacity:1!important;
}

/* SVG dog: breathing, blink, head tilt, paw raise and tail wag */
@keyframes pkpg-svg-dog-breathe{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-1.5px) scale(1.012)}
}
@keyframes pkpg-svg-dog-tail{
    from{transform:rotate(-16deg)}
    to{transform:rotate(22deg)}
}
@keyframes pkpg-svg-dog-headtilt{
    0%,100%{transform:rotate(0deg)}
    45%{transform:rotate(-8deg) translateY(-1px)}
}
@keyframes pkpg-svg-blink{
    0%,43%,52%,100%{transform:scaleY(1)}
    47%{transform:scaleY(.08)}
}
@keyframes pkpg-svg-paw-wave{
    0%,100%{transform:rotate(0deg) translateY(0)}
    35%{transform:rotate(-20deg) translate(-4px,-10px)}
    70%{transform:rotate(10deg) translate(-2px,-7px)}
}
.pkpg-v30 .pkpg-dog.is-active .pkpg-dog-body{
    animation:pkpg-svg-dog-breathe 3.6s ease-in-out infinite!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-dog .pkpg-dog-tail{
    animation:pkpg-svg-dog-tail .17s ease-in-out 8 alternate!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-dog .pkpg-dog-head{
    animation:pkpg-svg-dog-headtilt .7s ease!important;
}
.pkpg-v30 .pkpg-dog .pkpg-dog-eye{
    animation:pkpg-svg-blink 4.8s ease-in-out infinite!important;
}
.pkpg-v30.is-attention .pkpg-dog .pkpg-dog-paw,
.pkpg-v30.is-correct .pkpg-dog .pkpg-dog-paw{
    animation:pkpg-svg-paw-wave .72s ease!important;
}
.pkpg-v30.is-correct .pkpg-dog .pkpg-dog-tail{
    animation:pkpg-svg-dog-tail .1s ease-in-out 12 alternate!important;
}

/* SVG cat: tail sway, ear twitch, slow blink, paw tap */
@keyframes pkpg-svg-cat-tail{
    from{transform:rotate(-7deg)}
    to{transform:rotate(12deg)}
}
@keyframes pkpg-svg-cat-ear-left{
    0%,100%{transform:rotate(0deg)}
    45%{transform:rotate(-10deg)}
}
@keyframes pkpg-svg-cat-ear-right{
    0%,100%{transform:rotate(0deg)}
    45%{transform:rotate(10deg)}
}
@keyframes pkpg-svg-cat-head{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-2px)}
}
@keyframes pkpg-svg-cat-paw{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px) rotate(-8deg)}
}
.pkpg-v30 .pkpg-cat.is-active .pkpg-cat-tail{
    animation:pkpg-svg-cat-tail 2.8s ease-in-out infinite alternate!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-cat .pkpg-cat-ear-left{
    animation:pkpg-svg-cat-ear-left .55s ease!important;
}
.pkpg-v30 .pkpg-character:hover .pkpg-cat .pkpg-cat-ear-right{
    animation:pkpg-svg-cat-ear-right .55s ease!important;
}
.pkpg-v30 .pkpg-cat .pkpg-cat-eye{
    animation:pkpg-svg-blink 5.4s ease-in-out infinite!important;
}
.pkpg-v30.is-attention .pkpg-cat .pkpg-cat-paw,
.pkpg-v30.is-correct .pkpg-cat .pkpg-cat-paw{
    animation:pkpg-svg-cat-paw .72s ease!important;
}
.pkpg-v30.is-correct .pkpg-cat .pkpg-cat-tail{
    animation:pkpg-svg-cat-tail .2s ease-in-out 7 alternate!important;
}

/* distinct wrong-answer body language */
@keyframes pkpg-svg-dog-confused-head{
    0%,100%{transform:rotate(0)}
    35%{transform:rotate(-10deg)}
    70%{transform:rotate(7deg)}
}
@keyframes pkpg-svg-cat-annoyed-tail{
    0%,100%{transform:rotate(0)}
    30%{transform:rotate(20deg)}
    55%{transform:rotate(-18deg)}
    80%{transform:rotate(12deg)}
}
.pkpg-v30.is-wrong .pkpg-dog .pkpg-dog-head{
    animation:pkpg-svg-dog-confused-head .7s ease!important;
}
.pkpg-v30.is-wrong .pkpg-cat .pkpg-cat-tail{
    animation:pkpg-svg-cat-annoyed-tail .55s ease!important;
}

/* thinking state */
@keyframes pkpg-svg-thinking{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-2px) rotate(-4deg)}
}
.pkpg-v30.is-thinking .pkpg-dog .pkpg-dog-head,
.pkpg-v30.is-thinking .pkpg-cat .pkpg-cat-head{
    animation:pkpg-svg-thinking 1.05s ease-in-out infinite!important;
}

/* ambient actions */
@keyframes pkpg-svg-sniff{
    0%,100%{transform:translateY(0) rotate(0)}
    40%{transform:translateY(5px) rotate(4deg)}
    72%{transform:translateY(2px) rotate(-2deg)}
}
@keyframes pkpg-svg-cat-look{
    0%,100%{transform:translateX(0) rotate(0)}
    40%{transform:translateX(-3px) rotate(-3deg)}
    72%{transform:translateX(2px) rotate(2deg)}
}
.pkpg-v30.is-ambient-sniff .pkpg-dog .pkpg-dog-head{
    animation:pkpg-svg-sniff 1s ease!important;
}
.pkpg-v30.is-ambient-look .pkpg-cat .pkpg-cat-head{
    animation:pkpg-svg-cat-look 1s ease!important;
}

/* stronger happy body reactions remain on the whole SVG mascot */
.pkpg-v30.is-correct .pkpg-dog.is-active{
    animation:pkpg-dog-celebrate .9s cubic-bezier(.2,.8,.2,1)!important;
}
.pkpg-v30.is-correct .pkpg-cat.is-active{
    animation:pkpg-cat-proud .85s ease!important;
}

/* Slight SVG shadow, still lightweight and crisp */
.pkpg-v30 .pkpg-svg{
    filter:drop-shadow(0 5px 7px rgba(23,61,45,.12))!important;
}

/* mobile sizing */
@media(max-width:700px){
    .pkpg-v30 .pkpg-mascot-stage{
        width:86px!important;
        height:94px!important;
        transform:none!important;
        margin-bottom:0!important;
    }
    .pkpg-v30 .pkpg-mascot{
        width:86px!important;
        height:94px!important;
    }
    .pkpg-v30 .pkpg-svg{
        width:86px!important;
        height:94px!important;
    }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){
    .pkpg-v30 .pkpg-svg *,
    .pkpg-v30 .pkpg-svg{
        animation:none!important;
        transition:none!important;
    }
}


/* ==========================================================
   v3.7 – Moj napredek
   ========================================================== */
.pkpg-v30 .pkpg-home-tools{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-bottom:10px!important;
}
.pkpg-v30 .pkpg-home-tools .pkpg-achievements-open,
.pkpg-v30 .pkpg-home-tools .pkpg-progress-open{
    margin:0!important;
}
.pkpg-v30 .pkpg-progress-open{
    appearance:none!important;
    width:100%!important;
    border:1px solid #d9e7df!important;
    background:linear-gradient(135deg,#f1f8f3,#f8fbf9)!important;
    color:var(--ink)!important;
    border-radius:13px!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    text-align:left!important;
    cursor:pointer!important;
    transition:transform .16s ease,border-color .16s ease!important;
}
.pkpg-v30 .pkpg-progress-open:hover{
    transform:translateY(-1px)!important;
    border-color:var(--g)!important;
}
.pkpg-v30 .pkpg-progress-open>span:first-child{font-size:23px!important}
.pkpg-v30 .pkpg-progress-open strong{display:block!important;font-size:12px!important}
.pkpg-v30 .pkpg-progress-open small{
    display:block!important;
    margin-top:2px!important;
    color:#768078!important;
    font-size:9.5px!important;
}
.pkpg-v30 .pkpg-progress-account{
    font-size:10px!important;
    color:#718078!important;
    background:#f4f7f5!important;
    padding:5px 8px!important;
    border-radius:999px!important;
}
.pkpg-v30 .pkpg-progress-grid{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin:12px 0 14px!important;
}
.pkpg-v30 .pkpg-progress-card{
    min-width:0!important;
    padding:10px 7px!important;
    border:1px solid #dfe8e2!important;
    background:#f8fbf9!important;
    border-radius:12px!important;
    text-align:center!important;
}
.pkpg-v30 .pkpg-progress-card>span{
    display:block!important;
    font-size:20px!important;
    margin-bottom:3px!important;
}
.pkpg-v30 .pkpg-progress-card strong{
    display:block!important;
    color:var(--gd)!important;
    font-size:19px!important;
    line-height:1.05!important;
}
.pkpg-v30 .pkpg-progress-card small{
    display:block!important;
    margin-top:4px!important;
    color:#768078!important;
    font-size:9.5px!important;
    line-height:1.2!important;
}
.pkpg-v30 .pkpg-next-achievement{
    padding:13px!important;
    border:1px solid #e7ddba!important;
    background:linear-gradient(135deg,#fffaf0,#f4f9f6)!important;
    border-radius:14px!important;
}
.pkpg-v30 .pkpg-next-achievement-top{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    color:#675b2d!important;
    font-size:10px!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
}
.pkpg-v30 .pkpg-next-achievement-name{
    margin-top:7px!important;
    color:var(--ink)!important;
    font-weight:900!important;
    font-size:14px!important;
}
.pkpg-v30 .pkpg-progress-bar{
    width:100%!important;
    height:8px!important;
    margin:9px 0 6px!important;
    background:#e7ece8!important;
    border-radius:999px!important;
    overflow:hidden!important;
}
.pkpg-v30 .pkpg-progress-bar span{
    display:block!important;
    width:0;
    height:100%!important;
    background:linear-gradient(90deg,#568f73,#78ad8d)!important;
    border-radius:999px!important;
    transition:width .45s ease!important;
}
.pkpg-v30 .pkpg-next-achievement-desc{
    color:#758078!important;
    font-size:10.5px!important;
    line-height:1.35!important;
}

@media(max-width:700px){
    .pkpg-v30 .pkpg-progress-grid{grid-template-columns:repeat(2,1fr)!important}
    .pkpg-v30 .pkpg-home-tools{grid-template-columns:1fr!important}
}