/* =========================================================================
   ภาพชุดใหม่ (รอบ 3): ห้องโกดัง / เวทีกรีดกระสอบ / การ์ดคลี่เสื้อ / ไอคอน HUD
   ========================================================================= */
/* ไอคอน HUD */
.hud-ico { width: 18px; height: 18px; display: block; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
#hud .icon-btn .hud-ico { width: 17px; height: 17px; margin: auto; }
.hud-pill .hud-ico { width: 16px; height: 16px; }
@media (min-width: 1200px) and (min-height: 700px) { .hud-ico, #hud .icon-btn .hud-ico { width: 21px; height: 21px; } }
.hud-spin { transform-origin: 12px 13px; animation: spin 1s linear infinite; }

/* ห้องโกดัง: พื้นปูนขัด + ชั้นวางเหล็กเงาๆ + แสงไฟส่องลงมา */
#warehouse-scene {
    background:
        radial-gradient(ellipse 60% 40% at 25% 0%, rgba(255, 214, 140, .16), transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(255, 214, 140, .12), transparent 70%),
        repeating-linear-gradient(90deg, transparent 0 140px, rgba(0, 0, 0, .25) 140px 146px, transparent 146px 150px),
        repeating-linear-gradient(0deg, transparent 0 58px, rgba(0, 0, 0, .18) 58px 62px),
        linear-gradient(180deg, #23252f, #191a21 40%, #121318);
    background-attachment: local;
}
.sack-visual-card { box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.sack-art { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); }

/* กองกระสอบ: พื้นโกดังใต้สปอตไลต์ */
.pile-grid {
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255, 230, 180, .22), transparent 70%),
        repeating-linear-gradient(0deg, transparent 0 40px, rgba(0, 0, 0, .2) 40px 42px),
        repeating-linear-gradient(90deg, transparent 0 40px, rgba(0, 0, 0, .16) 40px 42px),
        linear-gradient(180deg, #4a4540, #2a2622);
    border: 2px solid #5c5249; box-shadow: inset 0 0 30px rgba(0, 0, 0, .6);
}
.pile-svg { filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .5)); }

/* เวทีกรีดกระสอบ: สปอตไลต์จากเพดาน */
#modal-sack { background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(255, 228, 170, .16), rgba(0, 0, 0, .95) 70%), rgba(12, 10, 9, .94); }
.sack-big { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); }
.sack-big::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); z-index: -1; }
.knife { font-size: 0; transform: translate(-30%, -85%) rotate(-10deg); }
.knife svg { display: block; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); }
.cut-progress { height: 12px; border-radius: 8px; background: #111; border: 1px solid #3a3a3a; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }
#cut-fill { background: linear-gradient(90deg, #ffbe0b, #fb5607); box-shadow: 0 0 10px #fb5607; }

/* การ์ดคลี่เสื้อ: ด้านหลัง = ห่อกระดาษคราฟต์ผูกเชือก */
.rv-back {
    background-color: #b08a5a;
    background-image:
        linear-gradient(90deg, transparent 46%, rgba(120, 80, 40, .9) 46% 54%, transparent 54%),
        linear-gradient(0deg, transparent 46%, rgba(120, 80, 40, .9) 46% 54%, transparent 54%),
        repeating-linear-gradient(35deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px),
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 60%);
    border: 2px solid #6b4c2c; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), inset 0 -8px 14px rgba(0, 0, 0, .25);
}
.rv-back svg { filter: saturate(.5) brightness(.9) drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); opacity: .9; }
/* ด้านหน้า: กรอบโลหะตามระดับ + แสงส่องจากด้านหลังเสื้อ */
.rv-front { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tc, #555) 30%, #2b231f), #15110f 75%); border: 2px solid var(--tc, #555); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 22px color-mix(in srgb, var(--tc, #555) 45%, transparent); }
.rv-front svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); }
.rv-front.t5 { --tc: #ff4d6d; }
.rv-front.t6 { --tc: #00f5d4; }