#award-screen{position:fixed;inset:0;z-index:12;overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:18px 20px max(24px,env(safe-area-inset-bottom));min-height:100dvh;text-align:center}
.award-inner{max-width:440px;margin:auto}
#award-title{font-size:clamp(25px,7vw,34px);line-height:1.4;margin:30px 0 12px}
#award-message{font-size:15px;line-height:1.7;font-weight:750;margin:12px 0 24px}
.board-caption{font-size:13px;font-weight:800;margin:14px 0}
#award-next{margin-top:20px;min-height:58px}
#award-status{font-size:13px;color:var(--teal)}
.home-progress{margin-top:22px;padding:14px 0;border-top:2px dashed #dce3ec;text-align:center}
#rank-label{font-weight:900;font-size:15px;margin:4px 0 10px}
#stamp-summary{font-size:13px;margin:10px 0 16px}
.progress-buttons{display:flex;gap:8px;justify-content:center}
.progress-buttons button{font-size:13px;flex:1;border-color:#dce3ec}
#book-board select{width:100%;margin:10px 0}
.gallery-novice{display:flex;flex-direction:column;align-items:center;font-weight:800;margin:15px 0 24px}
.gallery-novice canvas,.gallery-pair canvas{width:128px;height:160px;image-rendering:pixelated}
.gallery-description{grid-column:1/-1;color:#637188;font-weight:500!important}
.master-mystery p{letter-spacing:1px}
.quest-goal{margin:19px 0 12px;text-align:center}
.quest-goal p{font-weight:850;font-size:14px;line-height:1.5;margin:0 0 8px}
.quest-goal progress{appearance:none;-webkit-appearance:none;border:0;border-radius:0;width:100%;height:10px;background:#e4eaf1;display:block;overflow:hidden}
.quest-goal progress::-webkit-progress-bar{background:#e4eaf1}
.quest-goal progress::-webkit-progress-value{background:var(--teal)}
.quest-goal progress::-moz-progress-bar{background:var(--teal)}
.reset-box{border-top:2px dashed #dce3ec;margin:24px 0;padding:12px 0}
.reset-box h3{font-size:17px;margin-bottom:8px}
.reset-box>button{width:100%;border-color:#c8a092}
#reset-confirm{margin:16px 0;padding:14px;border:2px solid var(--ink);border-radius:8px;background:white}
.reset-actions{display:flex;flex-wrap:wrap;gap:8px}
.reset-actions button{flex:1;font-size:13px}
#confirm-reset{flex:2;background:var(--red);color:white}
.parent-tip{font-size:12px!important;color:#637188}
.gallery-pair{display:grid;grid-template-columns:1fr 1fr;border-top:2px dashed #dce3ec;padding:16px 0;gap:12px;text-align:center}
.gallery-pair p{font-size:12px;font-weight:800;line-height:1.5;margin:5px 0}
.evolution-stage{height:350px;position:relative;display:grid;place-items:center;margin:16px auto;max-width:340px;isolation:isolate}
#evolution-cat{width:256px;height:320px;image-rendering:pixelated;position:relative;z-index:2}
.evolution-rays{position:absolute;width:270px;height:270px;background:var(--yellow);clip-path:polygon(50% 0,58% 27%,78% 8%,73% 35%,100% 30%,80% 50%,100% 70%,73% 65%,78% 92%,58% 73%,50% 100%,42% 73%,22% 92%,27% 65%,0 70%,20% 50%,0 30%,27% 35%,22% 8%,42% 27%);z-index:0}
.evolution-particles{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.evolution-particles i{position:absolute;background:var(--color);width:12px;height:12px;opacity:0}
#evolution-name{font-weight:950;font-size:26px;margin:14px 0}
#evolution-school{font-size:14px;font-weight:750;line-height:1.6}
[data-phase=charge] #evolution-cat{animation:evolution-charge .2s ease-in-out infinite}
[data-phase=charge] .evolution-rays{animation:evolution-ring .95s ease-in both}
[data-phase=transform] #evolution-cat{animation:evolution-arrive .65s ease-out both}
[data-phase=transform] .evolution-rays{animation:evolution-flower 1.25s ease-out both}
[data-phase=transform] .evolution-particles i{animation:evolution-party 1.15s ease-out both}
@keyframes evolution-charge{50%{transform:translateX(3px) scale(1.03)}}
@keyframes evolution-ring{from{transform:scale(.45) rotate(-45deg)}to{transform:scale(1) rotate(45deg)}}
@keyframes evolution-arrive{0%{transform:scale(.55);opacity:.3}55%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes evolution-flower{from{transform:scale(.65) rotate(0)}to{transform:scale(1.08) rotate(100deg)}}
@keyframes evolution-party{0%{opacity:1;transform:translate(0,0) scale(1.5)}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rot))}}
#hero{position:absolute;left:-18px;top:106px;width:192px;height:240px;image-rendering:pixelated;z-index:1;pointer-events:none}
#knob{z-index:2}
#hero[data-motion=float],[data-phase=done] #evolution-cat[data-motion=float]{animation:cat-float 1.8s steps(3,end) infinite}
#hero[data-motion=tiny]{animation:cat-tiny 1.4s steps(2,end) infinite}
@keyframes cat-float{50%{transform:translateY(-9px)}}
@keyframes cat-tiny{50%{transform:translateX(6px)}}
@media(max-width:350px){#award-screen{padding:14px 12px}.gallery-pair canvas,.gallery-novice canvas{width:96px;height:120px}}
@media(max-height:700px){#award-title{margin-top:20px}.evolution-stage{height:275px}#evolution-cat{width:192px;height:240px}.evolution-rays{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){#award-screen *,#hero{animation:none!important;transition:none!important}.evolution-particles{display:none}}

#award-message:empty{display:none}
