.hkj{padding:28px 20px;border:1px solid #c084fc55;border-radius:24px;background:radial-gradient(ellipse at center,#47225a55,transparent 75%),#ffffff06;margin-bottom:32px;text-align:center;color:#e8e0f0}
.hkj h2,.hkj-dialog h2{font-family:'Cinzel Decorative',serif;color:#d8b4fe;font-size:clamp(1.1rem,3vw,1.6rem);line-height:1.5;margin:0 0 12px}
.hkj-layout{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,2fr) minmax(80px,1fr);align-items:center;gap:20px;max-width:800px;margin:22px auto}
.hkj-side{display:grid;gap:18px}.hkj-color{margin:0;--spark:#c084fc}.hkj-color img{display:block;width:clamp(52px,9vw,95px);height:100px;object-fit:contain;margin:0 auto 6px;filter:grayscale(1) brightness(.65);opacity:.45}.hkj-color figcaption{font: .72rem/1.6 'Space Mono',monospace;color:#aaa0b5}.hkj-color small{display:block}
.hkj-color.is-unlocked img{filter:drop-shadow(0 0 9px var(--spark));opacity:1}.hkj-color.is-unlocked figcaption{color:var(--spark)}
.hkj-center img{display:block;width:100%;height:clamp(240px,36vw,420px);object-fit:contain;filter:drop-shadow(0 0 24px #c084fc44)}.hkj-stage{font-style:italic;color:#dbc0ef;line-height:1.7}
.hkj-progress{font: .85rem/1.6 'Space Mono',monospace;margin:12px 0}.hkj progress{display:block;width:min(400px,100%);height:10px;margin:10px auto 18px;accent-color:#c084fc}.hkj-meet{border:0;background:none;color:#d8b4fe;text-decoration:underline;cursor:pointer;padding:10px;font:inherit}.hkj-message{color:#eedcff;font-size:1.15rem;line-height:1.7;max-width:580px;margin:18px auto}.hkj-celebrate .hkj-center img{animation:hkj-heal 2s ease-out}.hkj-celebrate .hkj-message{animation:hkj-glow 2s ease-out}
.hkj-dialog{background:#160f22;color:#e8e0f0;border:1px solid #c084fc88;border-radius:24px;padding:28px;width:min(580px,calc(100% - 28px));max-height:90dvh;overflow:auto;margin:auto;text-align:center}.hkj-dialog::backdrop{background:#05020bd9}.hkj-dialog img{display:block;width:180px;height:210px;object-fit:contain;margin:0 auto 14px}.hkj-dialog p{line-height:1.8;margin:0 0 15px}.hkj-dialog button{margin:10px 0;padding:12px 20px;border:1px solid #c084fc;border-radius:30px;background:#c084fc;color:#160f22;cursor:pointer;font:inherit}.hkj-dialog button:disabled{opacity:.6}.hkj-dialog [role=status]{font-size:.85rem;color:#ffd0da}.hkj-dialog :focus-visible,.hkj :focus-visible{outline:2px solid #ffe000;outline-offset:4px}
@keyframes hkj-heal{0%{transform:scale(.92);filter:drop-shadow(0 0 0 #d8b4fe)}45%{transform:scale(1.04);filter:drop-shadow(0 0 45px #d8b4fe)}100%{transform:scale(1);filter:drop-shadow(0 0 24px #c084fc44)}}@keyframes hkj-glow{50%{text-shadow:0 0 24px #e9d5ff;transform:translateY(-4px)}}
@media(max-width:500px){.hkj{padding:24px 12px}.hkj-layout{grid-template-columns:76px minmax(0,1fr) 76px;gap:4px}.hkj-side{gap:16px}.hkj-color img{height:68px;width:60px}.hkj-color figcaption{font-size:.6rem}.hkj-center img{height:260px}.hkj-stage{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.hkj *{animation:none!important}}