/* LootBeezShop video tutorial player */
.tu { background: linear-gradient(160deg, #13503B, #0F3D2E); color: #fff; border-radius: 24px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(15, 61, 46, .7); display: flex; flex-direction: column; gap: 10px; }
.tu-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tu-top b { font-size: 18px; flex: 1; min-width: 160px; }
.tu-badge-txt { background: #D9480F; color: #fff; font-weight: 800; font-size: 12px; border-radius: 6px; padding: 3px 8px; letter-spacing: .06em; }
.tu-lang { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 4px 6px 4px 10px; }
.tu-lang select { background: transparent; color: #fff; border: 0; font: 600 15px inherit; padding: 4px; cursor: pointer; max-width: 140px; }
.tu-lang option { color: #1B1F1D; }
.tu-stage { position: relative; border-radius: 18px; overflow: hidden; background: #FFF7E3; }
.tu-art { display: block; width: 100%; height: auto; }
.tu-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(15, 30, 24, .82); backdrop-filter: blur(4px); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.tu-step { font-size: 12px; color: #F4B942; font-weight: 800; }
.tu-text { margin: 0; font-size: clamp(15px, 2.2vw, 19px); line-height: 1.4; font-weight: 600; color: #fff; font-family: 'Mukta', 'Nirmala UI', 'Noto Sans', sans-serif; }
.tu-big-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 0; background: #F4B942; color: #0F3D2E; font-size: 30px; cursor: pointer; box-shadow: 0 0 0 10px rgba(244, 185, 66, .3), 0 14px 30px rgba(0, 0, 0, .35); animation: tu-pulse 1.8s ease-in-out infinite; }
.tu.is-playing .tu-big-play { display: none; }
.tu-ctrl { display: flex; align-items: center; gap: 10px; }
.tu-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.tu-btn:hover { background: rgba(255, 255, 255, .1); }
.tu-bars { flex: 1; display: flex; gap: 5px; }
.tu-seg { flex: 1; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; cursor: pointer; }
.tu-seg i { display: block; height: 100%; width: 0; background: #F4B942; border-radius: inherit; }
.tu-note { margin: 0; font-size: 13px; color: #CFE3D8; min-height: 0; }
.tu-note:empty { display: none; }

.tu-art .tu-phone, .tu-art .tu-badge { transform-box: fill-box; transform-origin: center; }
.tu-stage[data-scene] .tu-screen { animation: tu-in .45s ease both; }
.tu-art .tu-badge { animation: tu-bob 3s ease-in-out infinite; }
.tu-art .tu-blink { transform-box: fill-box; transform-origin: center; animation: tu-blink 4s infinite; }
.tu.is-playing .tu-mouth { transform-box: fill-box; transform-origin: top center; animation: tu-talk .42s ease-in-out infinite; }
.tu-art .tu-finger { transform-box: fill-box; transform-origin: center; animation: tu-tap 1.4s ease-in-out infinite; }
.tu-art .tu-pick { animation: tu-glow 1.2s ease-in-out infinite; }
.tu-art .tu-tap-target { animation: tu-glow 1.2s ease-in-out infinite; }
.tu-art .tu-eq rect { transform-box: fill-box; transform-origin: center; animation: tu-eq .6s ease-in-out infinite; }
.tu-art .tu-eq rect:nth-child(2n) { animation-delay: -.3s; }
.tu-art .tu-ring { transform-box: fill-box; transform-origin: center; animation: tu-ring 1.4s ease-out infinite; }
.tu-art .tu-coin { animation: tu-rise 1.8s ease-in infinite; }
.tu-art .tu-coin.d2 { animation-delay: .9s; }
@keyframes tu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tu-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tu-talk { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes tu-tap { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.7); opacity: 1; } }
@keyframes tu-glow { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@keyframes tu-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1.2); } }
@keyframes tu-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
@keyframes tu-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-60px); opacity: 0; } }
@keyframes tu-pulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(244, 185, 66, .3), 0 14px 30px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 0 18px rgba(244, 185, 66, .12), 0 14px 30px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .tu *, .tu-art * { animation: none !important; } }

/* WhatsApp: har page par tairta button */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; border-radius: 999px; padding: 10px 16px 10px 12px; box-shadow: 0 12px 28px -8px rgba(18, 140, 70, .7); transition: transform .2s ease; }
.wa-float:hover { transform: translateY(-2px); color: #fff; }
.wa-float svg { flex: none; }
.app-shell ~ .wa-float, .wa-float.wa-app { bottom: 84px; padding: 12px; }
.wa-float.wa-app span { display: none; }
@media (max-width: 600px) { .wa-float span { display: none; } .wa-float { padding: 12px; } }
