/* 대머리 뚫어뻥 — 화면 */
/* 사무실 벽 (사진처럼 밋밋한 회녹색). 바닥과 책상은 캔버스에 그립니다. */
.pl-wrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; color: #fff;
           background: linear-gradient(180deg, #EDF0EE 0%, #E3E8E6 58%, #D6DCD9 100%); }
.pl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.pl-hud { position: absolute; z-index: 3; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 48px);
          display: flex; gap: 7px; pointer-events: none; }
.pl-pill { flex: 1; text-align: center; padding: 6px 8px; border-radius: 14px; color: #17304A;
           background: rgba(255,255,255,.72); border: 1px solid rgba(20,50,80,.16); backdrop-filter: blur(6px); }
.pl-pill small { display: block; font-size: 9.5px; font-weight: 900; opacity: .6; }
.pl-pill b { display: block; font-size: 21px; font-weight: 1000; font-variant-numeric: tabular-nums; line-height: 1.05; }
.pl-pill.hit b { color: #C8341F; }

.pl-msg { position: absolute; z-index: 4; left: 0; right: 0; top: 40%; text-align: center;
          font-size: 40px; font-weight: 1000; letter-spacing: -.02em; pointer-events: none; opacity: 0;
          text-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 26px rgba(255,255,255,.5); }
.pl-msg.pop { animation: plMsg .9s cubic-bezier(.2,.9,.3,1.3); }
@keyframes plMsg { 0% { opacity: 0; transform: scale(.5) rotate(-8deg); }
                   22% { opacity: 1; transform: scale(1.18) rotate(3deg); }
                   40% { transform: scale(1) rotate(0); } 75% { opacity: 1; }
                   100% { opacity: 0; transform: translateY(-26px) scale(1); } }

.pl-sub { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 14px);
          text-align: center; font-size: 13.5px; font-weight: 900; line-height: 1.4; color: #fff;
          pointer-events: none; padding: 9px 14px; border-radius: 15px;
          background: rgba(12,22,38,.78); border: 1px solid rgba(255,255,255,.2);
          box-shadow: 0 6px 18px rgba(0,0,0,.28); backdrop-filter: blur(5px); }
.pl-sub:empty { display: none; }

/* 명중했을 때 화면이 한 번 흔들립니다 */
.pl-wrap.shake { animation: plShake .42s ease-out; }
@keyframes plShake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 4px) rotate(-.5deg); }
                     35% { transform: translate(6px, -5px) rotate(.5deg); }
                     55% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -2px); } }

/* 끝 화면 */
.pl-final { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%);
            width: calc(100% - 44px); max-width: 330px; padding: 22px 20px; border-radius: 22px; text-align: center;
            background: rgba(10,16,30,.9); border: 1px solid rgba(255,255,255,.18);
            box-shadow: 0 22px 60px rgba(0,0,0,.45); backdrop-filter: blur(8px);
            animation: plFinal .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes plFinal { from { opacity: 0; transform: translate(-50%, -42%) scale(.86); } to { opacity: 1; } }
.pl-final.hide { display: none !important; }
.pl-final b { display: block; font-size: 46px; font-weight: 1000;
              background: linear-gradient(90deg, #FFD36E, #FF8A5B, #FF5E8A);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-final span { display: block; font-size: 15px; font-weight: 900; margin-top: 2px; }
.pl-final small { display: block; font-size: 12px; opacity: .68; margin-top: 7px; line-height: 1.5; }
.pl-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.pl-dots i { width: 26px; height: 26px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 1000;
             display: flex; align-items: center; justify-content: center;
             background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.pl-dots i.perfect { background: #FFD36E; color: #3A2500; border-color: #FFD36E; }
.pl-dots i.great { background: rgba(110,230,160,.3); border-color: rgba(110,230,160,.5); }
.pl-dots i.miss { opacity: .45; }