/* 재미 요소: 꽃가루, 번번이 반응, 자물쇠 열림, 회로 보드, 배지, 칭호 */
.cf{position:absolute;width:16px;height:16px;border-radius:5px;z-index:95;pointer-events:none;animation:cfly 1.3s cubic-bezier(.2,.7,.3,1) forwards}
.cf.st{width:24px;height:24px;border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes cfly{0%{transform:translate(0,0) rotate(0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 170px)) rotate(var(--rt)) scale(1);opacity:0}}

/* 번번이 말풍선 */
.bubble.glitch{animation:gj 2.2s steps(1) infinite;text-shadow:2px 0 rgba(0,160,255,.45),-2px 0 rgba(255,60,90,.4)}
@keyframes gj{0%,86%,100%{transform:none}88%{transform:translate(-3px,1px) skewX(-4deg)}90%{transform:translate(3px,-1px) skewX(4deg)}92%{transform:translate(-2px,0)}94%{transform:translate(2px,1px)}}
.bubble.oops{color:#8f2a1f;animation:shake .45s}
.bubble.good{color:#17583e}
.bubble.type{animation:wipe .9s steps(22) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pic .bi.hop{animation:hop .7s ease-in-out 2}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-4deg)}70%{transform:translateY(0) rotate(3deg)}}
.pic .bi.dz{animation:dz .5s ease-in-out}
@keyframes dz{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) translateX(-6px)}75%{transform:rotate(6deg) translateX(6px)}}

/* 자물쇠 열림 */
#unlock{position:absolute;inset:0;z-index:90;background:rgba(29,24,16,.55);backdrop-filter:blur(5px);display:grid;place-items:center;animation:fade .2s both}
.ul{width:560px;padding:46px 40px 40px;border-radius:44px;background:var(--card);text-align:center;box-shadow:0 50px 90px -30px rgba(0,0,0,.7);animation:pop .4s cubic-bezier(.2,.9,.3,1.2) both}
.ul .lk{width:190px;height:190px;stroke:#1d1b17;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ul .lk rect{fill:#ffd54a;transition:fill .3s}.ul .lk .kh{fill:#1d1b17}
.ul .lk .sh{transform-origin:16px 11px;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
#unlock.open .lk .sh{transform:translateY(-3.2px) rotate(-38deg)}#unlock.open .lk rect{fill:#7fdc9d}
#unlock.open .lk{animation:lkj .5s}
@keyframes lkj{0%{transform:scale(1)}40%{transform:scale(1.16) rotate(-5deg)}100%{transform:scale(1)}}
.ul b{display:block;font-size:62px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px;opacity:0;transform:translateY(14px);transition:.4s}
#unlock.open b,#unlock.open .ustars,#unlock.open .combo{opacity:1;transform:none}
.ustars{display:flex;justify-content:center;gap:8px;opacity:0;transition:.4s .15s}.ustars .stv{width:62px;height:62px}
.ul .combo{opacity:0;transition:.4s .3s}
.combo{display:inline-flex;align-items:center;height:38px;padding:0 18px;margin-top:12px;border-radius:99px;background:linear-gradient(90deg,#ff7a4a,#ffb23a);color:#fff;font-size:19px;font-weight:800;box-shadow:0 8px 14px -8px rgba(220,90,30,.7)}

/* 회로 점등 보드·배지 */
.nodes{display:flex;gap:7px;justify-content:center;align-self:stretch;flex-wrap:wrap}
.nd{display:flex;gap:4px;padding:6px 9px;border-radius:99px;background:rgba(255,255,255,.7)}
.nd i{width:13px;height:13px;border-radius:50%;background:#e3dac6;transition:.4s}
.nd i.on{background:var(--c);box-shadow:0 0 10px var(--c),0 0 0 2px rgba(255,255,255,.8) inset}
.bcard.who{position:relative}
.bcard.who .combo{position:absolute;right:20px;top:18px;margin:0;height:32px;font-size:16px;padding:0 14px}
.bdgs,.cbadges{display:flex;gap:8px;margin-top:8px}
.bdg{width:44px;height:50px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#e3dac6;display:grid;place-items:center;color:#fff;transition:.4s}
.bdg .ico{width:23px;height:23px;stroke-width:2.4;opacity:.4}
.bdg.on{background:var(--c);filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}.bdg.on .ico{opacity:1}
.cbadges{justify-content:center;margin:2px 0 4px}.cbadges .bdg{width:68px;height:78px}.cbadges .bdg .ico{width:34px;height:34px}
.rank{display:inline-flex;align-items:center;height:44px;padding:0 24px;border-radius:99px;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(90deg,#6c8a8a,#4a6d6c)}
.rank.r2{background:linear-gradient(90deg,#3da577,#2f8a63)}.rank.r3{background:linear-gradient(90deg,#4b5f96,#8a4fb0)}.rank.r4{background:linear-gradient(90deg,#ff7a4a,#e0a000);box-shadow:0 10px 18px -8px rgba(220,120,20,.7)}
.bcard.orb .stones{flex-wrap:wrap}