/* =====================================================================
   Màn đập theo mockup (assets/26536a4e-….jfif, màn 2) + hình nhân vẽ tay (www/img/chars)
   ===================================================================== */

/* ---------- hình nhân ảnh (dùng chung: lượt đập, thẻ, mâm, cảnh) ---------- */
.rdoll { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rdoll-img { height: 100%; width: auto; max-width: none; display: block; filter: drop-shadow(0 6px 4px rgba(60, 20, 0, .28)); transform-origin: 50% 100%; user-select: none; -webkit-user-drag: none; }
.ntag { position: absolute; top: 56%; left: 50%; transform: translateX(-50%) rotate(-3deg); background: #fbf6ea; border: 1px solid #bfae88; border-radius: 2px;
  padding: 0 .45em; font: 700 clamp(9px, 2.6vmin, 14px)/1.5 Itim, sans-serif; color: var(--ink); white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); pointer-events: none; }
.ntag b { font-weight: 400; position: relative; }
.ntag em, .ntag i { position: absolute; left: 50%; transform: translateX(-50%); font-family: Pangolin, Itim, cursive; font-style: normal; color: var(--red); white-space: nowrap; }
.ntag em { top: -1.15em; transform: translateX(-50%) rotate(-6deg); font-size: 1.15em; }
.ntag i { top: .05em; opacity: .55; font-size: 1.2em; }
.ntag.t2 b, .ntag.t3 b, .ntag.t4 b { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ntag.t3 b, .ntag.t4 b { opacity: .4; }
.cracks { position: absolute; inset: 8% 22% 6%; width: 56%; height: 86%; pointer-events: none; fill: none; stroke-linejoin: bevel; }
.cracks .wr { stroke: rgba(70, 25, 10, .35); stroke-width: .8; }
.cracks .tr { display: none; stroke: #2a0f0b; stroke-width: 2.4; }
.tier-4 .cracks .tr { display: inline; }
.tier-4 .rdoll-img { filter: grayscale(.45) contrast(1.05) drop-shadow(0 6px 4px rgba(0, 0, 0, .4)); }
.tier-0 .cracks { display: none; }
.rdoll-shield { position: absolute; left: 50%; top: 34%; width: 58%; transform: translateX(-50%) rotate(-8deg) scale(0); transition: transform .12s; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); pointer-events: none; }
.rdoll.shielding .rdoll-shield { transform: translateX(-50%) rotate(-8deg) scale(1); }
.rdoll.ducking .rdoll-img { transform: scaleY(.42) scaleX(1.12); filter: brightness(.8); transition: transform .1s; }
.rdoll.ducking .ntag { opacity: 0; }
.rdoll.tele .rdoll-img { animation: jit .09s linear infinite; }
@keyframes jit { 50% { transform: translateX(3px) rotate(2deg); } }
.rdoll.hit-anim .rdoll-img { animation: squash .16s ease-out; }
@keyframes squash { 40% { transform: scale(1.08, .88) rotate(-4deg); } }

/* ---------- sân chơi ---------- */
.play { background: #2a0f0b; }
.play .stage { background: #e9b85a; }
.r-wall { position: absolute; left: 0; right: 0; top: 0; height: 42%; overflow: hidden;
  background: #efc25e radial-gradient(rgba(120, 60, 10, .16) 1.1px, transparent 1.5px) 0 0 / 6px 6px; }
.r-wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #8a4a2a; }
.r-door-l { position: absolute; left: -6%; bottom: 0; height: 92%; opacity: .95; }
.r-door-r { position: absolute; right: -3%; bottom: 0; height: 100%; }
.r-sign { position: absolute; left: 26%; top: 20%; width: 22%; transform: rotate(-4deg); }
.r-floor { position: absolute; left: 0; right: 0; top: 41%; bottom: 0; overflow: hidden; perspective: 420px; background: #b8582f; }
.r-floor i { position: absolute; left: -80%; right: -80%; bottom: -2%; height: 300%; transform-origin: 50% 100%; transform: rotateX(62deg);
  background-color: #c8643a;
  background-image: linear-gradient(#93401f 3px, transparent 3px), linear-gradient(90deg, #93401f 3px, transparent 3px),
    radial-gradient(rgba(60, 20, 0, .14) 1.2px, transparent 1.6px);
  background-size: 64px 64px, 64px 64px, 6px 6px; }
.r-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(40, 10, 0, .25), transparent 30%); }
.r-altar { position: absolute; left: 2%; top: 30%; width: 34%; aspect-ratio: 1 / .8; pointer-events: none; }
.r-altar img { position: absolute; }
.r-stool { left: 0; bottom: 0; width: 100%; }
.r-fruit { left: 16%; bottom: 52%; width: 52%; }
.r-incense { left: 60%; bottom: 55%; width: 22%; }
.r-candle { left: 2%; bottom: 55%; width: 14%; }
.r-mover { position: absolute; bottom: 15%; left: 50%; height: 46%; width: 56%; transform-origin: 50% 100%; will-change: transform, left; }
.r-mover .rdoll::before { content: ''; position: absolute; bottom: -2%; left: 50%; width: 44%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: rgba(40, 10, 0, .3); }
.slip-rest { position: absolute; right: -24px; bottom: -36px; width: 170px; transform: rotate(-12deg); pointer-events: none; transition: transform .2s, opacity .1s; z-index: 4; }
.slip-rest img { width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.slip-rest.hide { opacity: 0; }
.slip-rest.down { transform: rotate(18deg) translate(30px, 40px); }

/* ---------- HUD kiểu mockup ---------- */
.play .hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: flex-start; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px 0; background: none; pointer-events: none; }
.play .hud > * { pointer-events: auto; }
.hud-score { display: flex; flex-direction: column; align-items: flex-start; background: var(--plaque) url(../img/panel_red.webp) center / cover; border: 3px solid var(--cream); outline: 2px solid var(--plaque-d);
  border-radius: 8px; padding: 2px 10px 4px; transform: rotate(-2deg); color: var(--cream); min-width: 92px; }
.hud-score small { font: 800 13px/1 var(--cond); letter-spacing: .5px; }
.play .hud .score { background: none; border: 0; outline: 0; padding: 0; transform: none; font-size: 30px; line-height: 1; }
.play .hud .combo { background: none; padding: 0; font-size: 14px; color: #ffe08a; }
.hud-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.play .timer-txt { width: auto; background: var(--plaque) url(../img/panel_red.webp) center / cover; border: 3px solid var(--cream); outline: 2px solid var(--plaque-d); border-radius: 8px;
  padding: 0 12px; font-size: 26px; color: var(--cream); }
.hud-mid .bar { width: 70%; height: 6px; }
.play .hud-name { font-size: 15px; color: var(--plaque); background: var(--cream); padding: 0 8px; border-radius: 6px; border: 2px solid var(--plaque); }

/* ---------- thanh dưới: ĐỔI DÉP | DỪNG TAY ---------- */
.r-bar { flex: none; display: flex; align-items: center; background: var(--plaque) url(../img/panel_red.webp) center / cover; border-top: 3px solid var(--cream);
  padding: 6px 10px max(8px, env(safe-area-inset-bottom)); z-index: 11; }
.r-bar button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--cream); font: 800 20px var(--cond); letter-spacing: .5px; padding: 8px; border-radius: 10px; }
.r-bar button:active { background: rgba(0, 0, 0, .2); }
.r-bar-ico { height: 30px; width: auto; }
.r-bar-sep { width: 2px; align-self: stretch; background: rgba(251, 239, 207, .5); margin: 4px 0; }
#stopBtn.glow { background: var(--navy); outline: 3px solid var(--cream); animation: pulse .7s infinite; }
#stopBtn.on { background: var(--jade); animation: none; }

/* đổi dép giữa lượt */
.swap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 340px; }
.swap-it { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; background: var(--cream) url(../img/panel_bg.webp) center / cover; border: 3px solid var(--red); color: var(--red); font: 800 13px var(--cond); }
.swap-it img { width: 60px; height: 48px; object-fit: contain; }
.swap-it.on { border-color: var(--navy); color: var(--navy); box-shadow: 0 0 0 3px var(--mustard); }

/* bong bóng thì thầm: avatar mặt nhân vật */
.w-face { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin: -6px 4px -4px -4px; background: var(--cream); border-radius: 50%; }
.taunt { transform: translate(-50%, 0) scale(.8); }
.taunt.on { transform: translate(-50%, 0) scale(1); }

/* ---------- thẻ hình nhân / mâm / kết quả dùng ảnh ---------- */
.sheet-doll .rdoll, .tray-doll .rdoll { height: 100%; }
.sheet-faces { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; }
.sheet-faces img { width: 46px; height: 42px; object-fit: contain; background: var(--cream); border: 2px solid var(--navy); border-radius: 50%; padding: 2px; }
.res-pic .rdoll { height: 100%; }
.play .taunt { white-space: normal; text-align: center; width: max-content; max-width: min(240px, 70vw); line-height: 1.25; }
.r-mover { height: 42%; }
.rdoll-shield { width: 92%; top: 26%; }

/* ---------- ver2: vũ khí cầm tay ---------- */
.tabs { grid-template-columns: repeat(3, 1fr); }
.tabs .tab { font-size: 16px; padding: 6px 4px; }
.item-card img { height: 70px; }
.item-hero img { height: 110px; }
.slip img { width: 130px; }
.slip-rest { width: 150px; right: -16px; bottom: -30px; }
.swap-grid { grid-template-columns: repeat(4, 1fr); max-height: 52vh; overflow-y: auto; max-width: 360px; padding: 4px; }
.swap-it img { width: 52px; height: 52px; }
.swap-it b { font-size: 11px; line-height: 1.1; }
.r-bar button { font-size: 18px; }
.hero-v2 { position: relative; align-items: flex-end; }
.hero-altar { position: absolute; left: 50%; bottom: 10%; width: 92%; max-width: 380px; transform: translateX(-50%); opacity: .9; }
.hero-dolls { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; height: 72%; max-height: 260px; margin-bottom: 4%; }
.hero-dolls .rdoll { height: 100%; }
.hero-dolls .rdoll:nth-child(odd) { transform: translateY(-4%); }
.hero-dolls .rdoll-img { max-width: 140%; }
.hero-table { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(#d8352b, #a51f19); border-top: 3px solid #7e1611; border-radius: 6px; }

/* ---------- v3: nhân vật vẽ theo tiến triển truyện ---------- */
.cracks .wr { display: none; }              /* giấy nhăn đã có trong art */
.rdoll.ducking .rdoll-img { transform: none; filter: drop-shadow(0 6px 4px rgba(60, 20, 0, .28)); }
.r-mover { height: 36%; bottom: 20%; }      /* nhỏ & lơ lửng như mockup */
.r-mover .rdoll-img { animation: hover 1.1s ease-in-out infinite; }
.r-mover .rdoll::before { bottom: -8%; width: 52%; height: 8%; animation: shadow 1.1s ease-in-out infinite; }
@keyframes hover { 50% { translate: 0 -10px; } }
@keyframes shadow { 50% { transform: translateX(-50%) scale(.82); opacity: .7; } }
.ntag { top: 62%; }
.tier-2 .ntag, .tier-3 .ntag { top: 66%; }
.white-doll .rdoll { height: 100%; }
.white-doll .ntag { top: 60%; font-size: 16px; }
.slipper-ico2 { position: absolute; left: 6%; bottom: 0; height: 46%; transform: rotate(-20deg); }
.vy-home { height: 26vh; display: flex; justify-content: center; }
.vy-home .rdoll { height: 100%; }
.vy-ghost { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .r-mover .rdoll-img, .r-mover .rdoll::before { animation: none; } }
.ntag, .tier-2 .ntag, .tier-3 .ntag { top: auto; bottom: 6%; }