.hhk-open{overflow:hidden!important}
.hhk-overlay{position:fixed;inset:0;background:rgba(27,21,43,.77);z-index:2147483000;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px;box-sizing:border-box;animation:hhkFade .25s ease-out}
.hhk-modal{position:relative;box-sizing:border-box;width:min(100%,420px);padding:22px 22px 26px;border-radius:25px;background:radial-gradient(ellipse at 50% 20%,#fffef8,#f5ebff 74%,#efe0ff 100%);border:5px solid #4e3b71;box-shadow:0 13px 0 #2d2540,0 25px 70px #0006;color:#332a4b;text-align:center;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;animation:hhkRise .65s cubic-bezier(.2,1.5,.35,1)}
.hhk-tag{display:inline-block;padding:6px 14px;border-radius:18px;background:linear-gradient(180deg,#fff3be,#ffd86d);border:2px solid #8d6531;font-weight:900;color:#75511a;font-size:11px;letter-spacing:1.3px;box-shadow:0 0 0 3px rgba(255,255,255,.45) inset}
.hhk-modal h2{margin:14px auto 4px;font-size:clamp(21px,5vw,27px);line-height:1.16;font-weight:900;max-width:340px;color:#44315f}
.hhk-art-wrap{height:238px;margin:-10px auto -1px;display:flex;align-items:center;justify-content:center;position:relative}
.hhk-art-wrap:before{content:'';position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,#fff5c7 0%,#eedfff 58%,#e6e1ff 100%);filter:blur(19px);opacity:.9}
.hhk-art-wrap img{position:relative;width:292px;height:238px;object-fit:contain;filter:drop-shadow(0 8px 2px #53486726)}
.hhk-modal h3{font-size:32px;font-weight:1000;margin:0;color:#3f3566;text-shadow:0 0 16px rgba(255,231,138,.45)}
.hhk-role{margin:3px 0 10px;font-size:13px;color:#866299;font-weight:800}
.hhk-description{margin:0 auto 18px;font-size:14px;line-height:1.48;max-width:310px;color:#564b66}
.hhk-actions{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.hhk-actions a,.hhk-actions button{box-sizing:border-box;border-radius:18px;padding:11px 16px;font:800 13px ui-rounded,'Trebuchet MS',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.hhk-view{background:#7854ae;color:#fff!important;border:2px solid #51357b}
.hhk-close{background:#fff;color:#594479;border:2px solid #ae9ac7}
.hhk-actions a:focus-visible,.hhk-actions button:focus-visible{outline:3px solid #2b93b1;outline-offset:2px}
@keyframes hhkFade{from{opacity:0}to{opacity:1}}
@keyframes hhkRise{from{transform:translateY(60px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.hhk-overlay,.hhk-modal{animation:none!important}}

/* The full approved art gently floats and sways without cropping the golden key. */
.hhk-idle-art{animation:hhk-float 3.4s ease-in-out infinite;will-change:transform}
@keyframes hhk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.hhk-idle-art{animation:none!important}}

/* Klinkit's SVG contains independent ear, blink, key-tail and crystal animations.
   Never animate the whole raster frame on top of that. */
.hhk-live-art{animation:none!important;object-fit:contain!important;max-width:100%;display:block}
.hhk-art-wrap{height:244px;overflow:visible!important}
.hhk-art-wrap img.hhk-live-art{width:310px;height:238px;object-fit:contain!important;filter:drop-shadow(0 6px 5px #57437527)}
.hhk-klinkit-tile .hh-hud-art,.hhk-klinkit-profile{overflow:visible!important}
.hhk-klinkit-tile .hh-hud-art img.hhk-live-art,.hhk-klinkit-profile img.hhk-live-art{object-fit:contain!important;max-width:100%!important;max-height:100%!important}