/* 대머리 3종 공통 화면 */
.bg-wrap { position: absolute; inset: 0; overflow: hidden; touch-action: none; color: #16304A; }
.bg-wrap.sun   { background: radial-gradient(circle at 50% 8%, #FFF6C8 0%, rgba(255,246,200,0) 42%),
                             linear-gradient(180deg, #7FCFF0 0%, #BFE6F6 48%, #FFE9B8 100%); }
.bg-wrap.hair  { background: linear-gradient(180deg, #EDF0EE 0%, #E2E7E5 62%, #D3DAD7 100%); }
.bg-wrap.shine { background: radial-gradient(circle at 50% 10%, #FFF1D2 0%, rgba(255,241,210,0) 44%),
                             linear-gradient(180deg, #CFE3F2 0%, #E8EFF6 52%, #D7C9AE 100%); }
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.bg-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; }
.bg-pill { flex: 1; text-align: center; padding: 6px 8px; border-radius: 14px; color: #17304A;
           background: rgba(255,255,255,.76); border: 1px solid rgba(20,50,80,.16); backdrop-filter: blur(6px); }
.bg-pill small { display: block; font-size: 9.5px; font-weight: 900; opacity: .6; }
.bg-pill b { display: block; font-size: 21px; font-weight: 1000; font-variant-numeric: tabular-nums; line-height: 1.05; }
.bg-pill b.bump { animation: bgBump .3s ease-out; }
@keyframes bgBump { 0% { transform: scale(1); } 45% { transform: scale(1.3); color: #E0552F; } 100% { transform: scale(1); } }

/* 바닥 안내: 밝은 배경 위에서도 또렷하게 보이도록 어두운 알약 안에 넣습니다. */
.bg-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); }
.bg-sub:empty { display: none; }
.bg-msg { position: absolute; z-index: 4; left: 0; right: 0; top: 24%; text-align: center;
          font-size: 36px; font-weight: 1000; pointer-events: none; opacity: 0;
          text-shadow: 0 3px 14px rgba(0,0,0,.3), 0 0 22px rgba(255,255,255,.6); }
.bg-msg.pop { animation: bgMsg .85s cubic-bezier(.2,.9,.3,1.3); }
@keyframes bgMsg { 0% { opacity: 0; transform: scale(.55) rotate(-6deg); }
                   22% { opacity: 1; transform: scale(1.15) rotate(3deg); }
                   42% { transform: scale(1); } 72% { opacity: 1; }
                   100% { opacity: 0; transform: translateY(-22px); } }

/* 진행 막대 (칠한 비율 · 광택) */
.bg-bar { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 100px);
          height: 12px; border-radius: 8px; background: rgba(255,255,255,.55);
          border: 1px solid rgba(20,50,80,.16); overflow: hidden; pointer-events: none; }
.bg-bar i { display: block; height: 100%; width: 0%; border-radius: 8px;
            background: linear-gradient(90deg, #6FD3A0, #3FB07A); transition: width .15s linear; }
.bg-wrap.shine .bg-bar i { background: linear-gradient(90deg, #FFE08A, #FFB13C); }

.bg-wrap.flash { animation: bgFlash .4s ease-out; }
@keyframes bgFlash { 0% { filter: brightness(1.9) saturate(1.3); } 100% { filter: none; } }
.bg-wrap.shake { animation: bgShake .36s ease-out; }
@keyframes bgShake { 0%,100% { transform: none; } 25% { transform: translate(-6px,3px); }
                     55% { transform: translate(5px,-4px); } 80% { transform: translate(-3px,2px); } }

/* 끝 화면 */
.bg-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); color: #fff;
            box-shadow: 0 22px 60px rgba(0,0,0,.45); backdrop-filter: blur(8px);
            animation: bgFinal .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes bgFinal { from { opacity: 0; transform: translate(-50%,-42%) scale(.86); } to { opacity: 1; } }
.bg-final.hide { display: none !important; }
.bg-final b { display: block; font-size: 44px; font-weight: 1000;
              background: linear-gradient(90deg,#FFD36E,#FF8A5B,#FF5E8A);
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-final span { display: block; font-size: 15px; font-weight: 900; margin-top: 2px; }
.bg-final small { display: block; font-size: 12px; opacity: .68; margin-top: 7px; line-height: 1.5; }
.bg-dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.bg-dots i { min-width: 30px; height: 26px; padding: 0 5px; 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); }
.bg-dots i.fast { background: #FFD36E; color: #3A2500; border-color: #FFD36E; }
.bg-dots i.slow { opacity: .5; }