/* ===== 무기: 사무실에서 동료·대표님 때리기 (app.js "무기" · data/catalog.js WEAPONS) =====
   사무실 월드는 통째로 줄여 그리므로(scale) 크기는 월드 px 기준, 글자·이모지는 --inv 로 되돌려 키운다.
   효과는 비싼 무기일수록 화려하다: pop(뿅망치) < slap(슬리퍼) < splash(고등어) < rock(기타) < thunder(번개 망치) */

/* 무기 그림(svg — 뿅망치): 이모지처럼 글자 크기를 따른다 */
.wsvg{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em;overflow:visible}
.wp-ic .wsvg{width:30px;height:30px;vertical-align:0}
/* 무장 버튼 · 무장 중 커서 */
.obtn.wpbtn.on{background:var(--red);color:#fff;border-color:var(--red)}
body.armed .oworld .actor:not(.me),body.armed .oworld .actor.npc{cursor:crosshair}

/* 무기 창 */
.wp-card .bg-sub{line-height:1.55}
.wp-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.wp-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--memo)}
.wp-item.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.wp-ic{flex:none;width:42px;height:42px;display:grid;place-items:center;font-size:26px;border-radius:10px;background:var(--paper)}
.wp-item.tier-rare .wp-ic{background:#E3F0FF}
.wp-item.tier-epic .wp-ic{background:#F1E6FF}
.wp-item.tier-legend .wp-ic{background:linear-gradient(135deg,#FFE9A8,#FFC7E0,#C9E4FF);box-shadow:0 0 10px rgba(255,190,60,.6)}
.wp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wp-tx b{font-size:13px}
.wp-tx small{font-size:11.5px;color:var(--muted);line-height:1.4}
.wp-tier{display:inline-block;margin-left:4px;font-size:10.5px;font-weight:500;padding:0 6px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.tier-rare .wp-tier{color:#2F5AA8;border-color:#9DB8E8}
.tier-epic .wp-tier{color:#7A3FC0;border-color:#C6A6EC}
.tier-legend .wp-tier{color:#A0650A;border-color:#E8C06A;background:#FFF6DC}

/* 들고 있는 무기 (내 캐릭터, 무장 중) */
/* 캐릭터 그림 상자(.pwrap, 512 캔버스) 안 · 손 위치에 app.js holdWeapon 이 left/top(%)을 넣는다. 뿅망치 그림은 좌우로 뒤집어
   손잡이 끝이 손(몸 쪽 아래), 머리가 바깥 위로 가게 쥔다. .pwrap 이 뒤집히면(캐릭터 방향) 같이 뒤집힌다 */
.pwrap .wheld{position:absolute;width:34%;height:34%;display:grid;place-items:center;font-style:normal;font-size:40px;line-height:1;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 0 rgba(0,0,0,.22))}
/* 캐릭터 그림 규칙(.ac svg 크기 160px · .ac.flip .pwrap svg 뒤집기 해제)이 무기 그림에 걸리지 않게 */
.actor .ac .pwrap .wheld .wsvg{position:static!important;width:100%!important;height:100%!important;vertical-align:0;transform:scaleX(-1)!important}
.pwrap .wheld[hidden]{display:none}

/* 휘두르기: 머리 위에서 대상 쪽으로 내려친다 (--sd = 1 오른쪽 / -1 왼쪽) */
.oworld .actor .wswing{position:absolute;left:50%;bottom:120px;font-size:calc(34px * min(var(--inv), 1.8));pointer-events:none;z-index:7;transform-origin:50% 100%;
  animation:wswing .42s cubic-bezier(.3,1.6,.5,1) forwards}
.oworld .actor .wswing.tier-legend{filter:drop-shadow(0 0 8px #FFD34D)}
@keyframes wswing{
  0%{transform:translateX(-50%) rotate(calc(var(--sd) * -70deg)) scale(.8);opacity:0}
  25%{opacity:1}
  60%{transform:translateX(calc(-50% + var(--sd) * 38px)) rotate(calc(var(--sd) * 60deg)) scale(1.15)}
  100%{transform:translateX(calc(-50% + var(--sd) * 40px)) rotate(calc(var(--sd) * 50deg)) scale(1);opacity:0}}

/* 맞은 쪽 효과 상자 (머리 높이에 붙어 캐릭터를 따라 움직인다) */
.oworld .actor .hitfx{position:absolute;left:50%;bottom:118px;width:0;height:0;pointer-events:none;z-index:8}
.hitfx .hp{position:absolute;left:0;top:0;font-style:normal;font-size:calc(28px * min(var(--inv), 1.8));line-height:1;transform:translate(-50%,-50%);opacity:0;
  animation:hpart .8s ease-out forwards}
@keyframes hpart{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}
  15%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot));opacity:0}}
.hitfx .hsfx{position:absolute;left:0;top:-26px;transform:translate(-50%,-50%);white-space:nowrap;font-family:"Jua",sans-serif;font-size:calc(20px * min(var(--inv), 1.8));
  color:#fff;-webkit-text-stroke:calc(1.5px * min(var(--inv), 1.8)) #3A2A1A;paint-order:stroke;animation:hsfx .8s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes hsfx{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{transform:translate(-50%,-80%) scale(1.25);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-140%) scale(1);opacity:0}}
.hitfx .hring{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;border:4px solid #fff;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:hring .7s ease-out forwards}
@keyframes hring{0%{transform:translate(-50%,-50%) scale(.2);opacity:.95}100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}}

/* 무기별 색 */
.fx-pop .hsfx{color:#FFE45C}
.fx-slap .hsfx{color:#FFB3A7}
.fx-slap .hp{animation-duration:.7s}
.fx-splash .hsfx{color:#8FD3FF}
.fx-splash .hring{border-color:#7CC8FF;border-width:5px}
.fx-splash .hp{animation-duration:1s}
.fx-rock .hsfx{color:#E0B3FF;font-size:calc(24px * min(var(--inv), 1.8))}
.fx-rock .hring{border-color:#C38BFF;box-shadow:0 0 12px #C38BFF}
.fx-rock .hp{animation-duration:1.1s}
.fx-thunder .hsfx{color:#FFE45C;font-size:calc(30px * min(var(--inv), 1.8));text-shadow:0 0 12px #FFD34D}
.fx-thunder .hring{border-color:#FFE45C;border-width:6px;box-shadow:0 0 18px #FFD34D,0 0 6px #fff inset}
.fx-thunder .hp{animation-duration:1.3s;font-size:calc(34px * min(var(--inv), 1.8))}
/* 번개 망치: 하늘에서 번개가 떨어지고 사무실이 번쩍 */
.hitfx .hbolt{position:absolute;left:0;top:0;font-style:normal;font-size:calc(70px * min(var(--inv), 1.8));line-height:1;transform:translate(-50%,-160%);opacity:0;
  filter:drop-shadow(0 0 14px #FFE45C) drop-shadow(0 0 4px #fff);animation:hbolt .55s ease-in forwards}
@keyframes hbolt{0%{transform:translate(-50%,-420%) scaleY(1.6);opacity:0}30%{opacity:1}55%{transform:translate(-50%,-70%) scaleY(1);opacity:1}100%{transform:translate(-50%,-60%);opacity:0}}
.office .hflash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,236,140,.6) 60%,rgba(255,236,140,0));animation:hflash .55s ease-out forwards}
@keyframes hflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* 기절: 머리 위 별이 돌고, 캐릭터가 비틀 (이동·공격만 막힌다) */
.actor .stunstars{display:none}
.oworld .actor.stunned .stunstars{display:block;position:absolute;left:50%;bottom:142px;width:0;height:0;pointer-events:none;z-index:6}
.actor.stunned .stunstars i{position:absolute;left:0;top:0;font-style:normal;font-size:calc(18px * min(var(--inv), 1.8));animation:stunorb 1.1s linear infinite}
.actor.stunned .stunstars i:nth-child(2){animation-delay:-.37s}
.actor.stunned .stunstars i:nth-child(3){animation-delay:-.73s}
@keyframes stunorb{
  0%{transform:translate(-50%,-50%) rotate(0deg) translateX(34px) rotate(0deg) scale(1);opacity:1}
  50%{transform:translate(-50%,-50%) rotate(180deg) translateX(34px) rotate(-180deg) scale(.7);opacity:.7}
  100%{transform:translate(-50%,-50%) rotate(360deg) translateX(34px) rotate(-360deg) scale(1);opacity:1}}
.oworld .actor.stunned .ac{animation:stunwob 1.1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes stunwob{0%,100%{rotate:-8deg}50%{rotate:8deg}}
.oworld .actor.stunned .zzz{display:none}

@media (prefers-reduced-motion:reduce){
  .hitfx .hp,.hitfx .hring{animation-duration:.01s}
  .office .hflash{display:none}
  .oworld .actor.stunned .ac{animation:none;rotate:-8deg}
}