/* =====================================================================
   Màn đập v4 — theo mockup assets/ver2/5e894635….jfif, element từ 5dceda11….png (www/img/play)
   ===================================================================== */
.play-v4 { background: #4a0e08; }
.play-v4 .stage { background-color: #c8643a; background-size: cover; background-position: center top; }
.play-v4 .r-wall, .play-v4 .r-floor, .play-v4 .r-altar { display: none; }
.p-stool { position: absolute; left: -6%; top: 17%; width: 52%; pointer-events: none; filter: drop-shadow(0 8px 6px rgba(60, 10, 0, .25)); }
.p-tray { position: absolute; left: -3%; top: 14.5%; width: 47%; pointer-events: none; }
.p-knee-l { position: absolute; left: -10%; bottom: -3%; width: 66%; z-index: 5; pointer-events: none; }
.p-knee-r { position: absolute; right: -16%; bottom: -5%; width: 66%; z-index: 5; pointer-events: none; }

/* hình nhân lơ lửng giữa sân + bóng */
.play-v4 .r-mover { height: 30%; width: 50%; bottom: 25%; }
.play-v4 .r-mover .rdoll::before { display: none; }
.p-shadow { position: absolute; left: 50%; bottom: -14%; width: 72%; transform: translateX(-50%); opacity: .75; animation: shadow2 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes shadow2 { 50% { transform: translateX(-50%) scale(.8); opacity: .5; } }
.play-v4 .r-mover .rdoll-img { animation: hover2 1.1s ease-in-out infinite; }
@keyframes hover2 { 50% { translate: 0 -16px; } }

/* tay cầm dép: nghỉ ở góc dưới phải (giữa hình nhân và gối) */
.play-v4 .slip-rest { right: -6%; bottom: 13%; width: 44%; transform: rotate(4deg); z-index: 4; }
.play-v4 .slip-rest img.hand-main { width: 100%; }
.play-v4 .slip-rest.down { transform: rotate(28deg) translate(30px, 60px); }
.play-v4 .slip { z-index: 6; transform-origin: 75% 100%; }
.play-v4 .slip img.hand-main { width: 170px; }
@keyframes swing { 0% { opacity: 1; transform: rotate(40deg) translate(30px, 10px); } 45% { opacity: 1; transform: rotate(-8deg); } 100% { opacity: 0; transform: rotate(-2deg); } }

/* HUD: bảng brush đỏ */
.play-v4 .hud { align-items: flex-start; padding-top: max(12px, env(safe-area-inset-top)); }
.play-v4 .hud-score { background: none; border: 0; outline: 0; padding: 0; transform: none; min-width: 0; gap: 2px; }
.p-plaque { background-size: 100% 100%; color: #fbefcf; font-family: var(--cond); font-weight: 800; text-align: left; }
.p-score { width: 116px; padding: 8px 14px 6px; line-height: 1; transform: rotate(-1.5deg); }
.p-score small { display: block; font-size: 15px; letter-spacing: .5px; }
.play-v4 .hud .score { font-size: 40px; color: #fbefcf; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.p-combo { padding: 4px 14px; margin-left: 6px; transform: rotate(-2deg); opacity: 0; transition: opacity .15s; }
.p-combo.on { opacity: 1; }
.play-v4 .hud .combo { background: none; color: #fbefcf; font-size: 19px; padding: 0; white-space: nowrap; }
.play-v4 .hud .combo.hot { color: #ffe08a; }
.play-v4 .hud-mid { gap: 4px; }
.p-time { padding: 6px 18px; }
.play-v4 .timer-txt { background: none; border: 0; outline: 0; padding: 0; font-size: 32px; color: #fbefcf; width: auto; }
.play-v4 .hud-mid .bar { width: 46%; height: 5px; }
.play-v4 .hud-name { font-size: 14px; }
.p-pause { width: 50px; padding: 0; flex: none; }
.p-pause img { width: 100%; display: block; }

/* thanh dưới */
.p-bar { background: linear-gradient(#6e140f, #4a0e08); border-top: 3px solid #2a0705; padding: 6px 10px max(8px, env(safe-area-inset-bottom)); gap: 10px; }
.p-bar button { padding: 0; border-radius: 8px; }
.p-bar button img { width: 100%; display: block; }
.p-bar #stopBtn.glow { background: none; outline: 3px solid #fbefcf; animation: pulse .7s infinite; }
.p-bar #stopBtn.on { background: none; outline: 3px solid var(--jade); animation: none; }

/* thoại: bong bóng chữ tay như "HỤT NÈ CON" */
.play-v4 .taunt { background: none; border: 0; box-shadow: none; font-family: var(--cond); font-weight: 800; font-size: 20px; color: #fbefcf; text-transform: uppercase;
  text-shadow: 2px 2px 0 #7a1d12, -1px -1px 0 #7a1d12, 1px -1px 0 #7a1d12, -1px 1px 0 #7a1d12; transform: translate(-110%, 0) rotate(-6deg) scale(.8); }
.play-v4 .taunt.on { transform: translate(-110%, 0) rotate(-6deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .p-shadow, .play-v4 .r-mover .rdoll-img { animation: none; } }
