/* cadeados das ninhadas: cartão trancado, painel do cadeado, festa ao abrir e peças da Prova — chaves.js */

/* cartão trancado: o mascote vira silhueta e o cadeado (glifo Lock) fica por cima; o selo mostra a chave-osso */
.pk-card.lockd .pk-mascot { filter: brightness(0); opacity: .78; }
.pk-card .pk-padlock { position: absolute; left: 50%; top: 31%; width: 74px; height: 74px; transform: translate(-50%, -10%) rotate(-8deg); z-index: 1; pointer-events: none; }
.pk-card.lockd:hover .pk-padlock, .pk-card.lockd:focus-visible .pk-padlock { animation: lkwiggle .5s ease; }
.pk-keychip { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.pk-keychip .bonekey.mini { width: 58px; height: 28px; }
.pk-keychip img { width: 26px; height: 26px; }
.pk-keychip img.lk-ico { width: 16px; height: 16px; filter: brightness(0); }
@keyframes lkwiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; } }

/* criador: item de ninhada trancada */
.pk-bi img.lk { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; filter: brightness(0); }

/* chave-osso */
.bonekey { display: block; overflow: visible; }
.bonekey.big { width: 310px; height: 150px; margin: 0 auto; }
.bonekey.res { width: 87px; height: 42px; }

/* painel do cadeado */
.lk-panel { position: absolute; left: 240px; top: 104px; width: 800px; height: 520px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.25); color: var(--ink); }
.lk-title { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); height: 54px; padding: 0 22px; background: #ff6a00; border: 4px solid var(--ink); border-radius: 9px; display: flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 30px; color: #5a2205; white-space: nowrap; }
.lk-x { position: absolute; right: -20px; top: -24px; width: 60px; height: 58px; border-style: solid; border-width: 6px 6px 12px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; }
.lk-x img { width: 28px; height: 28px; filter: brightness(0) sepia(1) saturate(4) hue-rotate(-18deg) brightness(.45); }
.lk-x:active { transform: translateY(3px); }
.lk-pic { position: absolute; left: 44px; top: 48px; width: 250px; height: 250px; border: 4px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fdf0d9, #f3c992); display: flex; align-items: center; justify-content: center; }
.lk-mascot { width: 180px; height: 160px; object-fit: contain; filter: brightness(0); opacity: .82; }
.lk-lock { position: absolute; right: -10px; bottom: -6px; width: 100px; height: 100px; transform: rotate(-8deg); }
.lk-keybox { position: absolute; left: 330px; top: 74px; width: 430px; text-align: center; }
.lk-keybox.pop .bonekey { animation: punch .3s linear; }
.lk-count { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 28px; }
.lk-count b { color: #c8661c; }
.lk-week { position: absolute; left: 330px; top: 64px; width: 430px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--body); font-weight: 800; font-size: 18px; }
.lk-week img { width: 120px; height: 120px; object-fit: contain; }
.lk-week b { font-family: var(--display); font-size: 40px; line-height: 1; }
.lk-text { position: absolute; left: 44px; right: 44px; top: 322px; margin: 0; text-align: center; font-family: var(--body); font-weight: 800; font-size: 18px; line-height: 1.38; }
.lk-text b { color: #c8661c; }
.lk-btns { position: absolute; left: 0; right: 0; bottom: 38px; display: flex; justify-content: center; gap: 16px; }
.lk-btns .btn-orange { position: static; height: 62px; font-size: 26px; padding: 0 14px; }
.lk-btns .btn-orange .ico { width: 32px; height: 32px; margin-left: 2px; }
.lk-short { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--body); font-weight: 800; font-size: 14px; color: var(--muted); }

/* festa: raios girando, a silhueta ganha cor, o cadeado cai e as estrelas do SmashFX (fx.js) estouram */
.lk-party { z-index: 12; background: rgba(0,0,0,.8); overflow: hidden; }
.lk-rays { position: absolute; left: 640px; top: 250px; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,207,58,.32) 0 9deg, rgba(255,207,58,0) 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 42%); mask: radial-gradient(circle, #000 8%, transparent 42%); animation: lkspin 16s linear infinite; }
.lk-hero { position: absolute; left: 640px; top: 250px; width: 250px; height: 230px; object-fit: contain; translate: -50% -50%; animation: lkreveal 1.1s ease-out forwards; }
.lk-open { position: absolute; left: 720px; top: 268px; width: 92px; height: 92px; animation: lkfall 1s ease-in .35s forwards; }
.lk-yay { top: 398px; font-size: 50px; }
.lk-sub { right: auto; bottom: auto; left: 50%; transform: translateX(-50%); top: 484px; font-size: 18px; white-space: nowrap; }
.lk-ok { left: 520px; top: 566px; width: 240px; }
.lk-ok .paw, .lk-ok .ico { width: 34px; height: 34px; }
@keyframes lkspin { to { rotate: 360deg; } }
@keyframes lkreveal { 0% { filter: brightness(0); scale: .55; } 45% { filter: brightness(0); scale: 1.12; } 62% { filter: brightness(2.2); scale: .95; } 100% { filter: none; scale: 1; } }
@keyframes lkfall { 0% { translate: 0 0; rotate: 0deg; opacity: 1; } 20% { translate: 8px -26px; rotate: 18deg; } 100% { translate: 90px 420px; rotate: 160deg; opacity: 0; } }

/* Prova: HUD da loja, chave no resultado e linha no fim de jogo */
.pill.lk-hud { font-size: 15px; gap: 6px; padding: 0 10px; }
.pill.lk-hud .bonekey.mini { width: 50px; height: 24px; }
.pill.lk-hud .ok { color: #2f7a22; }
.lk-res { position: absolute; right: 16px; top: 12px; display: flex; align-items: center; gap: 6px; padding: 2px 12px 2px 6px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); }
.lk-res.pop .bonekey { animation: punch .3s linear; }
.lk-res .lk-add { position: absolute; right: 4px; top: 100%; font-size: 26px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; animation: snadd 1.8s ease-out forwards; }
.lk-total { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: 562px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .lk-rays, .lk-hero, .lk-open, .pk-padlock, .lk-res .lk-add { animation: none !important; } .lk-open { display: none; } }