/* 무당벌레 가족 · 비서 이름표 + 가족 접속 알림 (디자인 시안 mudangbugs-nameplate-preview / secretary 그대로) */
:root{--g1:#fffaf0;--g2:#f3d27e;--g3:#b98a2e;--g4:#6b4a12}
@keyframes famSweep{0%{transform:translateX(0) rotate(20deg)}60%,100%{transform:translateX(445%) rotate(20deg)}}
@keyframes famSweepN{0%{transform:translateX(0) rotate(18deg)}60%,100%{transform:translateX(475%) rotate(18deg)}}
@keyframes famTw{0%,100%{transform:scale(0) rotate(0);opacity:0}45%{transform:scale(1.15) rotate(45deg);opacity:1}70%{transform:scale(.6) rotate(70deg);opacity:.6}}
@keyframes famHeart{0%,100%{transform:translateY(0) scale(0);opacity:0}30%{transform:translateY(-4px) scale(1);opacity:1}80%{transform:translateY(-12px) scale(.7);opacity:0}}
@keyframes famSway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes famRing{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(4deg)}}
@keyframes famWiggle{0%,85%,100%{transform:translateX(-50%) rotate(0)}89%{transform:translateX(-50%) rotate(-10deg)}93%{transform:translateX(-50%) rotate(8deg)}97%{transform:translateX(-50%) rotate(-3deg)}}
/* 알림: 시안의 drop(6초 반복)을 한 번만 — 4초 보이고 위로 사라짐 */
@keyframes famDrop{0%{transform:translateY(-30px) scale(.9);opacity:0}8%{transform:translateY(0) scale(1.05);opacity:1}12%{transform:scale(1)}80%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-16px)}}

#famLayer{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden;contain:strict}
.famTag{position:absolute;left:0;top:0;transform-origin:50% 100%;padding:14px 8px 8px}
.famTag.off{display:none}
.famTag.calm .plate *,.famTag.calm .plate .body::after{animation:none!important}
.famTag.calm .spark,.famTag.calm .hrt{display:none}

.plate{position:relative;display:inline-flex;align-items:center}
.plate .body{position:relative;display:flex;align-items:center;gap:5px;padding:4px 15px 4px 7px;border-radius:999px;background:linear-gradient(180deg,var(--c1) 0%,var(--c2) 52%,var(--c3) 100%);border:1.8px solid var(--g2);box-shadow:0 0 0 1px var(--g4),inset 0 0 0 1.5px rgba(255,250,235,.6),inset 0 6px 6px -4px rgba(255,255,255,.75),inset 0 -3px 6px rgba(0,0,0,.18),0 0 13px var(--glow),0 0 3px var(--glow);overflow:hidden;white-space:nowrap}
.plate .body::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:rotate(20deg);animation:famSweep 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
.plate .emb{width:18px;height:24px;flex:none;position:relative;z-index:1;transform-origin:50% 90%;animation:famRing 3.2s ease-in-out infinite;animation-delay:var(--d,0s);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.plate .txt{position:relative;z-index:1;font-family:'Gowun Batang',serif;font-weight:700;font-size:14px;line-height:1.35;letter-spacing:.05em;color:var(--tc);text-shadow:0 1px 0 var(--ts),0 0 6px rgba(255,255,255,.25)}
.plate .bow,.plate .top{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:30px;height:17px;z-index:2;filter:drop-shadow(0 0 4px var(--glow))}
.plate .top.tie{top:-12px;width:30px;height:16px;animation:famWiggle 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.plate .pearl{position:absolute;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 25%,#f6eee6 45%,#d9cbbf 100%);box-shadow:0 0 0 1px var(--g3),0 0 5px var(--glow);z-index:2}
.plate .pearl.l{left:-5px}.plate .pearl.r{right:-5px}
.plate .tas{position:absolute;top:50%;margin-top:3px;width:5px;height:13px;border-radius:0 0 3px 3px;background:repeating-linear-gradient(90deg,var(--c2) 0 1px,var(--c1) 1px 2px);transform-origin:top center;animation:famSway 2.4s ease-in-out infinite;z-index:1}
.plate .tas.l{left:-3.5px}.plate .tas.r{right:-3.5px;animation-delay:.5s}
.plate .spark{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#fff 0 20%,var(--g2) 40%,transparent 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:famTw 1.8s ease-in-out infinite;z-index:3;pointer-events:none}
.plate .spark.s1{top:-8px;left:2px}.plate .spark.s2{top:-7px;right:6px;width:8px;height:8px;animation-delay:.6s}.plate .spark.s3{bottom:-7px;right:22px;width:7px;height:7px;animation-delay:1.1s}
.plate .hrt{position:absolute;bottom:2px;left:30px;width:8px;height:8px;z-index:3;animation:famHeart 2.6s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
.plate .hrt::before,.plate .hrt::after{content:"";position:absolute;top:0;width:5px;height:7.5px;background:var(--hc);border-radius:5px 5px 0 0}
.plate .hrt::before{left:4px;transform:rotate(-45deg);transform-origin:0 100%}
.plate .hrt::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
.plate.gold{--c1:#fff3cc;--c2:#ecc566;--c3:#b88a2c;--glow:#ffd86a;--tc:#5a3206;--ts:rgba(255,248,225,.85);--hc:#fff4c9}
.plate.pink{--c1:#ff9ed2;--c2:#ff3d9e;--c3:#c4136f;--glow:#ff4fac;--tc:#fff8e6;--ts:rgba(120,0,55,.85);--hc:#ffe0f0}
.plate.red{--c1:#ff8a80;--c2:#e8272f;--c3:#a50f1a;--glow:#ff4545;--tc:#fff8e6;--ts:rgba(100,0,10,.85);--hc:#ffd9d6}
.plate.purple{--c1:#d4b3ff;--c2:#9b5cf0;--c3:#6a2fc2;--glow:#b07cff;--tc:#fff8e6;--ts:rgba(50,10,100,.85);--hc:#efe2ff}
.plate.navy{--c1:#8fa8ff;--c2:#3557d6;--c3:#172a7a;--glow:#5f80ff;--tc:#fff8e6;--ts:rgba(10,20,70,.9);--hc:#dfe6ff}

/* ── 가족 접속 알림 (상단 가운데) ── */
#famNotice{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:60;pointer-events:none;width:min(390px,calc(100vw - 24px))}
.famNote{position:relative;width:100%;padding:16px 46px 14px;border-radius:999px;text-align:center;background:linear-gradient(180deg,rgba(38,26,44,.97),rgba(16,11,20,.97));border:2px solid var(--g2);box-shadow:0 0 0 1px var(--g4),inset 0 0 0 3px rgba(16,11,20,1),inset 0 0 0 4px rgba(243,210,126,.5),0 0 26px rgba(255,190,220,.35);animation:famDrop 4.6s ease-in-out forwards}
.famNote .clip{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.famNote .clip::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,240,220,.32),transparent);transform:rotate(18deg);animation:famSweepN 3s ease-in-out infinite}
.famNote .bow{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:38px;height:22px}
.famNote .nb{position:absolute;top:50%;margin-top:-17px;width:26px;height:34px;transform-origin:50% 90%;animation:famRing 3s ease-in-out infinite}
.famNote .nb.l{left:14px}.famNote .nb.r{right:14px;animation-delay:.25s}
.famNote .t1{font-family:'Gowun Batang',serif;font-weight:700;font-size:19px;line-height:1.35;background:linear-gradient(180deg,var(--g1),var(--g2) 55%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em}
.famNote .t2{font-size:12.5px;color:#eadfee;margin-top:3px;word-break:keep-all;overflow-wrap:anywhere}
.famNote .t2 b{color:var(--nc,#ff6fbf)}
/* 작게 (미니게임·상담 중) */
.famNote.small{padding:8px 34px 7px}
.famNote.small .t1{font-size:14px}.famNote.small .t2{font-size:11.5px;margin-top:1px}
.famNote.small .nb{width:18px;height:24px;margin-top:-12px}.famNote.small .nb.l{left:10px}.famNote.small .nb.r{right:10px}
.famNote.small .bow{width:28px;height:16px;top:-11px}
#chatLog .m.famChat{color:#f3d27e!important;font-weight:700}
@media (prefers-reduced-motion:reduce){.plate *,.plate .body::after,.famNote .clip::after{animation:none!important}}

/* 플레이어 닉네임 (HTML 겹침 화면): 굵은 한글 + 얇은 외곽선 — 3D 해상도와 관계없이 또렷 */
.nmTag{position:absolute;left:0;top:0;transform-origin:50% 50%;padding:2px 10px 3px;border-radius:999px;background:rgba(14,16,28,.55);color:#fff6dc;font:700 15px/1.25 "Noto Sans KR",sans-serif;letter-spacing:.01em;white-space:nowrap;text-shadow:0 0 2px rgba(8,8,16,.95),0 0 3px rgba(8,8,16,.7);pointer-events:none}
.nmTag.me{color:#bfe0ff}
.nmTag.off{display:none}
/* ── 머리 위 묶음: [말풍선] [무당벌레 이름표] [칭호] [닉네임] — 간격 3px, 함께 커지고 작아짐 ── */
.stk{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;transform-origin:50% 100%;pointer-events:none}
.stk.off{display:none}
.stk>.hidden{display:none}
.stk .nm{padding:2px 10px 3px;border-radius:999px;background:rgba(14,16,28,.55);color:#fff6dc;font:700 15px/1.25 "Noto Sans KR",sans-serif;letter-spacing:.01em;white-space:nowrap;text-shadow:0 0 2px rgba(8,8,16,.95),0 0 3px rgba(8,8,16,.7)}
.stk .nm.me{color:#bfe0ff}
/* 칭호 배지: 예전 3D 칭호와 같은 모양·비율 (높이 = 닉네임의 0.87배, 글자 = 높이의 0.61배) */
.stk .ttl{position:relative;height:20.6px;padding:0 12px;box-sizing:border-box;border-radius:4.4px;background:linear-gradient(180deg,rgba(120,70,10,.92),rgba(60,30,6,.92));border:1.1px solid #f3cf6e;color:#fff1c4;font:700 12.5px/18.4px "Gowun Batang","Noto Sans KR",serif;white-space:nowrap;text-shadow:0 0 3px rgba(255,200,80,.8)}
.stk .ttl::before,.stk .ttl::after{content:"";position:absolute;top:50%;width:3.6px;height:3.6px;margin-top:-1.8px;background:#ffd86b;transform:rotate(45deg)}
.stk .ttl::before{left:4.6px}.stk .ttl::after{right:4.6px}
/* 무당벌레 이름표: 칭호 배지와 같은 높이·글자 크기 (장식도 같은 비율로 줄임) */
.stk .pl .plate .body{padding:1px 9px 1px 4px;gap:3px;box-shadow:0 0 0 1px var(--g4),inset 0 0 0 1px rgba(255,250,235,.6),inset 0 4px 4px -3px rgba(255,255,255,.75),inset 0 -2px 4px rgba(0,0,0,.18),0 0 8px var(--glow),0 0 2px var(--glow);border-width:1.1px}
.stk .pl .plate .emb{width:11px;height:15px}
.stk .pl .plate .txt{font-size:12.5px;line-height:15px;letter-spacing:.04em}
.stk .pl .plate .bow,.stk .pl .plate .top{width:18px;height:10px;top:-6px;filter:drop-shadow(0 0 2px var(--glow))}
.stk .pl .plate .top.tie{width:18px;height:9.6px;top:-5.5px}
.stk .pl .plate .pearl{width:5px;height:5px;margin-top:-2.5px}
.stk .pl .plate .pearl.l{left:-3px}.stk .pl .plate .pearl.r{right:-3px}
.stk .pl .plate .tas{width:3px;height:6px;margin-top:2px}
.stk .pl .plate .tas.l{left:-2px}.stk .pl .plate .tas.r{right:-2px}
.stk .pl .plate .spark{width:6px;height:6px}.stk .pl .plate .spark.s1{top:-5px;left:1px}.stk .pl .plate .spark.s2{top:-4px;right:4px;width:5px;height:5px}.stk .pl .plate .spark.s3{bottom:-4px;right:13px;width:4px;height:4px}
.stk .pl .plate .hrt{width:5px;height:5px;left:18px;bottom:1px}
.stk .pl .plate .hrt::before,.stk .pl .plate .hrt::after{width:3px;height:4.6px}
.stk .pl .plate .hrt::before{left:2.4px}
.stk.calm .plate *,.stk.calm .plate .body::after{animation:none!important}
.stk.calm .spark,.stk.calm .hrt{display:none}
/* 채팅 말풍선 (최대 2줄 · 화면 폭 50%) */
.stk .bub{position:relative;margin-bottom:5px;padding:4px 10px;border-radius:12px;background:rgba(255,250,238,.95);border:1.5px solid rgba(185,138,62,.9);color:#2a2018;font:500 14px/1.35 "Noto Sans KR",sans-serif;text-align:center;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:260px}
/* 애기 무당: 노랑 진주 광택 · 진한 고동색 글씨 · 통통 튀는 금박 꽃핀 (mudangbugs-babymudang-nameplate-preview 그대로) */
@keyframes famBoing{0%,78%,100%{transform:translateX(-50%) translateY(0) scale(1)}84%{transform:translateX(-50%) translateY(-3px) scale(1.08,.94)}90%{transform:translateX(-50%) translateY(0) scale(.96,1.05)}95%{transform:translateX(-50%) translateY(-1px) scale(1.02)}}
.plate.yellow{--c1:#fff6b8;--c2:#ffd93b;--c3:#f0ad12;--glow:#ffe066;--tc:#6b3a08;--ts:rgba(255,252,230,.85);--hc:#ff8fbc}
.plate .top.flower{top:-14px;width:30px;height:18px;transform-origin:50% 100%;animation:famBoing 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.stk .pl .plate .top.flower{width:18px;height:10.8px;top:-6.5px}