{"id":212,"date":"2026-03-25T18:59:50","date_gmt":"2026-03-25T10:59:50","guid":{"rendered":"https:\/\/luckysheep.cc\/?page_id=212"},"modified":"2026-06-06T09:37:26","modified_gmt":"2026-06-06T01:37:26","slug":"000-1","status":"publish","type":"page","link":"https:\/\/luckysheep.cc\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Relaxation Station \u00b7 Free M3U8 Player<\/title>\r\n <meta name=\"description\" content=\"Free M3U8 player, supports link playback and local video drag-and-drop.\" \/>\r\n\r\n <style>\r\n :root {\r\n --bg: #080412;\r\n --card: rgba(255,255,255,.082);\r\n --card-2: rgba(255,255,255,.13);\r\n --border: rgba(216,180,254,.18);\r\n --text: #fbf7ff;\r\n --muted: rgba(251,247,255,.74);\r\n --soft: rgba(251,247,255,.52);\r\n --green: #32f5b7;\r\n --blue: #6d5dfc;\r\n --cyan: #8be9ff;\r\n --pink: #ff4fd8;\r\n --purple: #a855f7;\r\n --deep-purple: #5b21b6;\r\n --violet: #7c3aed;\r\n --orange: #ff9f43;\r\n --shadow: 0 30px 90px rgba(25,8,55,.48);\r\n --container: 1180px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n min-height: 100vh;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", Arial, sans-serif;\r\n color: var(--text);\r\n background:\r\n radial-gradient(circle at 12% -8%, rgba(168,85,247,.34), transparent 34%),\r\n radial-gradient(circle at 86% 4%, rgba(255,79,216,.22), transparent 32%),\r\n radial-gradient(circle at 52% 42%, rgba(109,93,252,.22), transparent 46%),\r\n radial-gradient(circle at 14% 82%, rgba(50,245,183,.12), transparent 30%),\r\n linear-gradient(180deg, #080412 0%, #0d071f 38%, #090615 72%, #05030c 100%);\r\n overflow-x: hidden;\r\n }\r\n\r\n body::before {\r\n display: none;\r\n }\r\n\r\n body::after {\r\n content: \"\";\r\n position: fixed;\r\n inset: -32%;\r\n z-index: -3;\r\n pointer-events: none;\r\n background:\r\n conic-gradient(from 160deg at 50% 50%,\r\n rgba(168,85,247,.20),\r\n rgba(109,93,252,.16),\r\n rgba(255,79,216,.14),\r\n rgba(50,245,183,.08),\r\n rgba(168,85,247,.20));\r\n filter: blur(78px);\r\n opacity: .9;\r\n animation: auroraSpin 32s linear infinite;\r\n }\r\n\r\n .particle-field {\r\n position: fixed;\r\n inset: 0;\r\n z-index: -2;\r\n overflow: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n .particle-dot {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: var(--dot-size);\r\n height: var(--dot-size);\r\n border-radius: 999px;\r\n background:\r\n radial-gradient(circle,\r\n rgba(255,255,255,.86) 0%,\r\n rgba(216,180,254,.62) 36%,\r\n rgba(168,85,247,.22) 70%,\r\n transparent 100%);\r\n box-shadow:\r\n 0 0 calc(var(--dot-size) * 2.5) rgba(216,180,254,.46),\r\n 0 0 calc(var(--dot-size) * 4.5) rgba(168,85,247,.22);\r\n opacity: 0;\r\n transform:\r\n translate(-50%, -50%)\r\n translate(var(--start-x), var(--start-y))\r\n scale(.45);\r\n animation: particleBurst var(--duration) linear infinite;\r\n animation-delay: var(--delay);\r\n will-change: transform, opacity;\r\n }\r\n\r\n @keyframes particleBurst {\r\n 0% {\r\n opacity: 0;\r\n transform:\r\n translate(-50%, -50%)\r\n translate(var(--start-x), var(--start-y))\r\n scale(.35);\r\n }\r\n\r\n 10% {\r\n opacity: var(--dot-opacity);\r\n }\r\n\r\n 72% {\r\n opacity: var(--dot-opacity);\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform:\r\n translate(-50%, -50%)\r\n translate(var(--end-x), var(--end-y))\r\n scale(1.18);\r\n }\r\n }\r\n\r\n @keyframes auroraSpin {\r\n from {\r\n transform: rotate(0deg) scale(1);\r\n }\r\n\r\n 50% {\r\n transform: rotate(180deg) scale(1.08);\r\n }\r\n\r\n to {\r\n transform: rotate(360deg) scale(1);\r\n }\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0%, 100% {\r\n background-position: 0% 50%;\r\n }\r\n\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n }\r\n\r\n @keyframes fadeUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n }\r\n\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @keyframes adShine {\r\n 0% {\r\n transform: translateX(-120%);\r\n }\r\n\r\n 45%, 100% {\r\n transform: translateX(120%);\r\n }\r\n }\r\n\r\n @keyframes livePulse {\r\n 70% {\r\n box-shadow: 0 0 0 9px rgba(255,79,216,0);\r\n }\r\n\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(255,79,216,0);\r\n }\r\n }\r\n\r\n @keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes floatSoft {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-4px);\r\n }\r\n }\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n }\r\n\r\n button,\r\n input {\r\n font: inherit;\r\n }\r\n\r\n video {\r\n display: block;\r\n max-width: 100%;\r\n }\r\n\r\n .container {\r\n width: min(var(--container), calc(100% - 36px));\r\n margin: 0 auto;\r\n }\r\n\r\n .gradient-text {\r\n background: linear-gradient(90deg, #c084fc, #8be9ff, #a855f7, #ff4fd8);\r\n background-size: 280% 100%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n animation: gradientMove 5.5s ease infinite;\r\n }\r\n\r\n .site-header-placeholder {\r\n height: 64px;\r\n position: sticky;\r\n top: 0;\r\n z-index: 80;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n padding: 0 24px;\r\n background: rgba(8,4,18,.68);\r\n border-bottom: 1px solid rgba(216,180,254,.12);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n }\r\n\r\n .hamburger {\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 14px;\r\n border: 1px solid var(--border);\r\n background: rgba(255,255,255,.07);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 5px;\r\n cursor: pointer;\r\n transition: .25s ease;\r\n }\r\n\r\n .hamburger:hover {\r\n transform: translateY(-2px);\r\n background: rgba(168,85,247,.16);\r\n border-color: rgba(216,180,254,.42);\r\n }\r\n\r\n .hamburger span {\r\n width: 21px;\r\n height: 2px;\r\n border-radius: 999px;\r\n background: #fff;\r\n }\r\n\r\n .ad-zone {\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px dashed rgba(216,180,254,.30);\r\n border-radius: 20px;\r\n background:\r\n linear-gradient(135deg, rgba(168,85,247,.12), rgba(255,255,255,.035)),\r\n radial-gradient(circle at 20% 0%, rgba(255,79,216,.12), transparent 35%),\r\n radial-gradient(circle at 80% 100%, rgba(109,93,252,.12), transparent 38%);\r\n color: rgba(255,255,255,.74);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n isolation: isolate;\r\n }\r\n\r\n .ad-zone::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.14) 45%, transparent 70%);\r\n transform: translateX(-120%);\r\n animation: adShine 4.6s ease-in-out infinite;\r\n }\r\n\r\n .ad-zone-label {\r\n position: absolute;\r\n left: 12px;\r\n top: 10px;\r\n font-size: 11px;\r\n color: rgba(255,255,255,.45);\r\n letter-spacing: .12em;\r\n font-weight: 800;\r\n }\r\n\r\n .ad-banner {\r\n height: 90px;\r\n margin: 24px auto;\r\n }\r\n\r\n .ad-real-banner {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 12px;\r\n padding: 14px;\r\n margin: 20px auto;\r\n border: 1px solid rgba(216,180,254,.15);\r\n border-radius: 16px;\r\n background: linear-gradient(135deg, rgba(168,85,247,.06), rgba(255,255,255,.02));\r\n }\r\n .ad-real-banner .ad-label {\r\n position: absolute;\r\n left: 12px;\r\n top: -10px;\r\n font-size: 10px;\r\n color: rgba(255,255,255,.5);\r\n letter-spacing: .1em;\r\n font-weight: 800;\r\n background: rgba(168,85,247,.35);\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n z-index: 2;\r\n }\r\n .ad-card {\r\n position: relative;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n border: 1px solid rgba(216,180,254,.12);\r\n background: #000;\r\n transition: all .3s;\r\n cursor: pointer;\r\n }\r\n .ad-card:hover {\r\n border-color: rgba(233,30,140,.4);\r\n box-shadow: 0 4px 20px rgba(233,30,140,.15);\r\n transform: translateY(-2px);\r\n }\r\n .ad-card iframe,\r\n .ad-card img {\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n display: block;\r\n border: none;\r\n pointer-events: none;\r\n object-fit: cover;\r\n }\r\n .ad-card-overlay {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: flex-end;\r\n background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%);\r\n z-index: 1;\r\n padding: 10px;\r\n }\r\n .ad-card-overlay span {\r\n color: #fff;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n text-shadow: 0 1px 4px rgba(0,0,0,.6);\r\n }\r\n @media (max-width: 900px) {\r\n .ad-real-banner {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n @media (max-width: 540px) {\r\n .ad-real-banner {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n }\r\n\r\n .ad-inline {\r\n min-height: 100px;\r\n margin: 34px 0;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n padding: 38px 0 74px;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n background:\r\n radial-gradient(circle at 14% 18%, rgba(168,85,247,.28), transparent 30%),\r\n radial-gradient(circle at 84% 22%, rgba(255,79,216,.20), transparent 30%),\r\n radial-gradient(circle at 50% 76%, rgba(109,93,252,.22), transparent 38%),\r\n radial-gradient(circle at 18% 92%, rgba(50,245,183,.10), transparent 28%);\r\n animation: floatSoft 8s ease-in-out infinite;\r\n }\r\n\r\n .hero-particles {\r\n display: none;\r\n }\r\n\r\n .hero-layout {\r\n position: relative;\r\n z-index: 1;\r\n display: grid;\r\n gap: 34px;\r\n align-items: center;\r\n }\r\n\r\n .hero-video-frame {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n border-radius: 34px;\r\n background: #000;\r\n border: 1px solid rgba(216,180,254,.20);\r\n box-shadow:\r\n 0 34px 90px rgba(20,8,45,.62),\r\n 0 0 80px rgba(168,85,247,.16);\r\n isolation: isolate;\r\n animation: fadeUp .85s ease both;\r\n }\r\n\r\n .hero-video-frame::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 2;\r\n pointer-events: none;\r\n background:\r\n linear-gradient(135deg, rgba(168,85,247,.16), transparent 34%),\r\n linear-gradient(315deg, rgba(255,79,216,.12), transparent 40%);\r\n mix-blend-mode: screen;\r\n }\r\n\r\n .hero-video-frame::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: -2px;\r\n z-index: -1;\r\n background: linear-gradient(90deg, #a855f7, #6d5dfc, #ff4fd8, #8be9ff, #a855f7);\r\n background-size: 340% 100%;\r\n filter: blur(22px);\r\n opacity: .62;\r\n animation: gradientMove 6s linear infinite;\r\n }\r\n\r\n .hero-video-frame video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n background: #000;\r\n }\r\n\r\n .hero-videos { transition: all .5s cubic-bezier(.4,0,.2,1); }\r\n .hero-video-frame.ratio-native {\r\n aspect-ratio: auto;\r\n }\r\n .hero-video-frame.ratio-native video {\r\n object-fit: contain;\r\n }\r\n\r\n .hero-size-toggle {\r\n min-height: 42px;\r\n border: 1px solid rgba(216,180,254,.28);\r\n background: rgba(0,0,0,.36);\r\n color: #fff;\r\n padding: 10px 16px;\r\n border-radius: 999px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n white-space: nowrap;\r\n transition: .25s ease;\r\n box-shadow: 0 10px 28px rgba(0,0,0,.28);\r\n }\r\n .hero-size-toggle:hover {\r\n background: rgba(168,85,247,.24);\r\n border-color: rgba(216,180,254,.62);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .hero-content {\r\n max-width: 840px;\r\n animation: fadeUp .85s ease .12s both;\r\n }\r\n\r\n .hero-badge-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n margin-bottom: 20px;\r\n width: 100%;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n min-height: 42px;\r\n padding: 10px 16px;\r\n border-radius: 999px;\r\n border: 1px solid rgba(216,180,254,.32);\r\n background: rgba(168,85,247,.14);\r\n color: rgba(255,255,255,.92);\r\n font-size: 14px;\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 12px 34px rgba(168,85,247,.12);\r\n }\r\n\r\n .hero-sound-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end;\r\n }\r\n\r\n .hero-sound-toggle,\r\n .hero-next-video,\r\n .hero-loop-toggle {\r\n min-height: 42px;\r\n border: 1px solid rgba(216,180,254,.28);\r\n background: rgba(0,0,0,.36);\r\n color: #fff;\r\n padding: 10px 16px;\r\n border-radius: 999px;\r\n font-size: 14px;\r\n cursor: pointer;\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n white-space: nowrap;\r\n transition: .25s ease;\r\n box-shadow: 0 10px 28px rgba(0,0,0,.28);\r\n }\r\n\r\n .hero-sound-toggle:hover,\r\n .hero-next-video:hover,\r\n .hero-loop-toggle:hover {\r\n background: rgba(168,85,247,.24);\r\n border-color: rgba(216,180,254,.62);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .hero-sound-toggle.is-on {\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n border-color: transparent;\r\n box-shadow: 0 14px 34px rgba(168,85,247,.25);\r\n }\r\n\r\n .hero-next-video,\r\n .hero-loop-toggle {\r\n background: rgba(109,93,252,.20);\r\n }\r\n\r\n .hero h1 {\r\n margin: 0;\r\n font-size: clamp(42px, 8vw, 88px);\r\n line-height: 1.04;\r\n letter-spacing: -.065em;\r\n text-shadow: 0 18px 55px rgba(0,0,0,.35);\r\n }\r\n\r\n .hero p {\r\n max-width: 760px;\r\n margin: 22px 0 0;\r\n color: var(--muted);\r\n font-size: 18px;\r\n line-height: 1.85;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 14px;\r\n margin-top: 30px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n border: 0;\r\n border-radius: 999px;\r\n padding: 13px 22px;\r\n cursor: pointer;\r\n transition: .25s ease;\r\n font-weight: 800;\r\n color: #fff;\r\n }\r\n\r\n .btn:hover {\r\n transform: translateY(-3px);\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n box-shadow: 0 18px 42px rgba(168,85,247,.25);\r\n }\r\n\r\n .btn-outline {\r\n border: 1px solid rgba(216,180,254,.26);\r\n background: rgba(255,255,255,.08);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n }\r\n\r\n .btn-glow {\r\n background: linear-gradient(135deg, #ff4fd8, #ff9f43);\r\n box-shadow: 0 18px 42px rgba(255,79,216,.22);\r\n }\r\n\r\n .section,\r\n .latest-section {\r\n padding: 76px 0;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 42px;\r\n }\r\n\r\n .section-tag {\r\n display: inline-flex;\r\n padding: 6px 12px;\r\n border-radius: 999px;\r\n color: #d8b4fe;\r\n background: rgba(168,85,247,.14);\r\n font-size: 12px;\r\n font-weight: 900;\r\n letter-spacing: .16em;\r\n margin-bottom: 12px;\r\n border: 1px solid rgba(216,180,254,.22);\r\n }\r\n\r\n .section-header h2 {\r\n margin: 0;\r\n font-size: clamp(30px, 5vw, 48px);\r\n letter-spacing: -.04em;\r\n }\r\n\r\n .section-header p {\r\n color: var(--muted);\r\n margin: 14px 0 0;\r\n }\r\n\r\n .divider {\r\n width: 78px;\r\n height: 4px;\r\n border-radius: 999px;\r\n margin: 20px auto 0;\r\n background: linear-gradient(90deg, #a855f7, #8be9ff);\r\n box-shadow: 0 0 24px rgba(168,85,247,.45);\r\n }\r\n\r\n .stats-bar,\r\n .cat-card,\r\n .card,\r\n .sidebar-widget,\r\n .tool-card,\r\n .membership-cta,\r\n .newsletter-box {\r\n background: var(--card);\r\n border: 1px solid var(--border);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n }\r\n\r\n .stats-bar {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 16px;\r\n padding: 22px;\r\n border-radius: 30px;\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n padding: 22px 12px;\r\n border-radius: 22px;\r\n background: rgba(255,255,255,.055);\r\n border: 1px solid rgba(255,255,255,.06);\r\n transition: .25s ease;\r\n }\r\n\r\n .stat-item:hover,\r\n .cat-card:hover,\r\n .card:hover,\r\n .tool-card:hover,\r\n .sidebar-widget:hover {\r\n background: rgba(168,85,247,.105);\r\n border-color: rgba(216,180,254,.28);\r\n box-shadow:\r\n 0 26px 80px rgba(20,8,45,.42),\r\n 0 0 38px rgba(168,85,247,.12);\r\n transform: translateY(-5px);\r\n }\r\n\r\n .stat-number {\r\n font-size: 38px;\r\n font-weight: 950;\r\n background: linear-gradient(90deg, #c084fc, #8be9ff, #ff4fd8);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n color: transparent;\r\n }\r\n\r\n .stat-label {\r\n color: var(--muted);\r\n margin-top: 8px;\r\n }\r\n\r\n .cat-carousel-wrap {\r\n position: relative;\r\n }\r\n .cat-grid {\r\n display: flex;\r\n gap: 16px;\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n scrollbar-width: none;\r\n -ms-overflow-style: none;\r\n padding: 10px 0;\r\n }\r\n .cat-grid::-webkit-scrollbar { display: none; }\r\n .cat-arrow {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: rgba(168,85,247,.6);\r\n border: 1px solid rgba(216,180,254,.3);\r\n color: #fff;\r\n font-size: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 5;\r\n transition: .2s;\r\n backdrop-filter: blur(8px);\r\n }\r\n .cat-arrow:hover {\r\n background: rgba(168,85,247,.85);\r\n transform: translateY(-50%) scale(1.1);\r\n }\r\n .cat-arrow-left { left: -16px; }\r\n .cat-arrow-right { right: -16px; }\r\n\r\n .cat-card {\r\n display: block;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 24px;\r\n min-width: 220px;\r\n max-width: 240px;\r\n min-height: 210px;\r\n border-radius: 24px;\r\n transition: .3s ease;\r\n isolation: isolate;\r\n flex-shrink: 0;\r\n }\r\n\r\n .cat-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 20px;\r\n display: grid;\r\n place-items: center;\r\n font-size: 28px;\r\n font-weight: 950;\r\n margin-bottom: 20px;\r\n transition: .3s ease;\r\n }\r\n\r\n .cat-card:hover .cat-icon {\r\n transform: rotate(-4deg) scale(1.08);\r\n }\r\n\r\n .cat-card h3 {\r\n margin: 0 0 10px;\r\n font-size: 22px;\r\n }\r\n\r\n .cat-card p {\r\n color: var(--muted);\r\n line-height: 1.72;\r\n margin: 0 0 18px;\r\n }\r\n\r\n .cat-count {\r\n color: #d8b4fe;\r\n font-weight: 900;\r\n font-size: 14px;\r\n }\r\n\r\n .m3u8-player-section {\r\n padding: 76px 0;\r\n background: transparent;\r\n }\r\n .tools-section {\r\n padding: 76px 0;\r\n background: rgba(0,0,0,.18);\r\n border-top: 1px solid rgba(216,180,254,.08);\r\n border-bottom: 1px solid rgba(216,180,254,.08);\r\n }\r\n\r\n .m3u8-player-wrapper {\r\n overflow: hidden;\r\n border-radius: 32px;\r\n background: rgba(8,4,18,.15);\r\n border: 1px solid rgba(216,180,254,.15);\r\n box-shadow: 0 20px 60px rgba(20,8,45,.2);\r\n transition: background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;\r\n }\r\n .m3u8-player-wrapper.playing {\r\n background:\r\n linear-gradient(145deg, rgba(168,85,247,.13), rgba(255,255,255,.04)),\r\n rgba(8,4,18,.92);\r\n border-color: rgba(216,180,254,.25);\r\n box-shadow:\r\n 0 30px 90px rgba(20,8,45,.55),\r\n 0 0 60px rgba(168,85,247,.15);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n }\r\n\r\n .player-input-bar {\r\n display: flex;\r\n gap: 12px;\r\n padding: 16px;\r\n align-items: center;\r\n border-bottom: 1px solid rgba(216,180,254,.12);\r\n background: rgba(0,0,0,.15);\r\n transition: background .4s ease;\r\n }\r\n .m3u8-player-wrapper.playing .player-input-bar {\r\n background: rgba(0,0,0,.4);\r\n }\r\n\r\n .stream-url-input,\r\n .newsletter-form input,\r\n .search-input {\r\n border: 1px solid rgba(216,180,254,.18);\r\n border-radius: 999px;\r\n color: #fff;\r\n background: rgba(0,0,0,.28);\r\n outline: none;\r\n transition: .2s ease;\r\n }\r\n\r\n .stream-url-input {\r\n flex: 1;\r\n min-width: 0;\r\n padding: 12px 16px;\r\n }\r\n\r\n .stream-url-input:focus,\r\n .newsletter-form input:focus,\r\n .search-input:focus {\r\n border-color: rgba(216,180,254,.55);\r\n box-shadow: 0 0 0 4px rgba(168,85,247,.10);\r\n }\r\n\r\n .stream-url-input::placeholder,\r\n .newsletter-form input::placeholder,\r\n .search-input::placeholder {\r\n color: rgba(255,255,255,.46);\r\n }\r\n\r\n .player-input-actions {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .mini-btn {\r\n border: 1px solid var(--border);\r\n color: #fff;\r\n background: rgba(255,255,255,.08);\r\n border-radius: 999px;\r\n padding: 10px 14px;\r\n cursor: pointer;\r\n transition: .2s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .mini-btn:hover {\r\n transform: translateY(-2px);\r\n border-color: rgba(216,180,254,.48);\r\n background: rgba(168,85,247,.16);\r\n }\r\n\r\n .video-stage {\r\n position: relative;\r\n aspect-ratio: 16 \/ 9;\r\n overflow: hidden;\r\n background: transparent;\r\n border-top: 1px solid rgba(255,255,255,.05);\r\n border-bottom: 1px solid rgba(255,255,255,.05);\r\n transition: background .4s ease;\r\n }\r\n\r\n .video-stage.has-video {\r\n background: #000;\r\n }\r\n\r\n .video-stage video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n background: transparent;\r\n opacity: 0;\r\n transition: opacity .25s ease;\r\n }\r\n\r\n .video-stage.has-video video {\r\n opacity: 1;\r\n background: #000;\r\n }\r\n\r\n .video-placeholder {\r\n position: absolute;\r\n inset: 0;\r\n display: grid;\r\n place-content: center;\r\n text-align: center;\r\n color: var(--muted);\r\n pointer-events: none;\r\n padding: 20px;\r\n z-index: 1;\r\n background: transparent;\r\n }\r\n\r\n .video-placeholder-icon {\r\n font-size: 64px;\r\n margin-bottom: 12px;\r\n animation: floatSoft 3s ease-in-out infinite;\r\n opacity: .55;\r\n filter: drop-shadow(0 0 16px rgba(168,85,247,.5));\r\n }\r\n\r\n .video-placeholder-main {\r\n margin: 0;\r\n font-size: 19px;\r\n font-weight: 800;\r\n color: rgba(255,255,255,.8);\r\n text-shadow: 0 2px 16px rgba(0,0,0,.7);\r\n }\r\n\r\n .add-src-hint {\r\n color: rgba(255,255,255,.6);\r\n font-size: 14px;\r\n margin-top: 14px;\r\n text-shadow: 0 2px 12px rgba(0,0,0,.6);\r\n }\r\n\r\n .loading-spinner {\r\n position: absolute;\r\n inset: 0;\r\n display: none;\r\n place-items: center;\r\n background: rgba(0,0,0,.16);\r\n z-index: 6;\r\n }\r\n\r\n .loading-spinner.show {\r\n display: grid;\r\n }\r\n\r\n .spinner-ring {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 999px;\r\n border: 4px solid rgba(255,255,255,.16);\r\n border-top-color: #d8b4fe;\r\n animation: spin .8s linear infinite;\r\n }\r\n\r\n .video-osd {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n padding: 18px;\r\n background: transparent;\r\n pointer-events: none;\r\n transition: background .3s ease;\r\n }\r\n .video-stage.has-video .video-osd {\r\n background:\r\n linear-gradient(to bottom, rgba(0,0,0,.32), transparent 30%, rgba(0,0,0,.5));\r\n }\r\n\r\n .video-osd button,\r\n .video-osd input,\r\n .video-osd .osd-progress {\r\n pointer-events: auto;\r\n }\r\n\r\n .live-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 7px;\r\n padding: 5px 10px;\r\n border-radius: 999px;\r\n background: rgba(255,79,216,.18);\r\n color: #ff9ee8;\r\n font-size: 12px;\r\n letter-spacing: .08em;\r\n font-weight: 900;\r\n }\r\n\r\n .live-dot {\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 999px;\r\n background: #ff4fd8;\r\n box-shadow: 0 0 0 0 rgba(255,79,216,.72);\r\n animation: livePulse 1.35s infinite;\r\n }\r\n\r\n .osd-channel-name {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-weight: 900;\r\n text-shadow: 0 4px 18px rgba(0,0,0,.5);\r\n }\r\n\r\n .osd-bottom-panel {\r\n padding: 12px;\r\n border-radius: 18px;\r\n background: rgba(0,0,0,.34);\r\n border: 1px solid rgba(216,180,254,.12);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n }\r\n\r\n .osd-progress {\r\n height: 6px;\r\n background: rgba(255,255,255,.16);\r\n border-radius: 999px;\r\n overflow: hidden;\r\n margin-bottom: 12px;\r\n cursor: pointer;\r\n }\r\n\r\n .osd-progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, #a855f7, #8be9ff);\r\n }\r\n\r\n .osd-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .osd-btn,\r\n .osd-fullscreen,\r\n .quality-btn,\r\n .share-btn {\r\n border: 1px solid var(--border);\r\n color: #fff;\r\n background: rgba(255,255,255,.1);\r\n border-radius: 999px;\r\n cursor: pointer;\r\n transition: .2s ease;\r\n }\r\n\r\n .osd-btn,\r\n .osd-fullscreen {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n\r\n .quality-btn,\r\n .share-btn {\r\n padding: 9px 13px;\r\n }\r\n\r\n .quality-btn.active {\r\n background: rgba(168,85,247,.18);\r\n border-color: rgba(216,180,254,.4);\r\n color: #d8b4fe;\r\n }\r\n\r\n .osd-btn:hover,\r\n .osd-fullscreen:hover,\r\n .quality-btn:hover,\r\n .share-btn:hover {\r\n transform: translateY(-2px);\r\n border-color: rgba(216,180,254,.42);\r\n }\r\n\r\n .osd-time {\r\n color: var(--muted);\r\n font-size: 14px;\r\n }\r\n\r\n .osd-spacer {\r\n flex: 1;\r\n }\r\n\r\n .osd-vol {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .player-info-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n padding: 18px;\r\n background: rgba(0,0,0,.1);\r\n transition: background .4s ease;\r\n }\r\n .m3u8-player-wrapper.playing .player-info-bar {\r\n background:\r\n linear-gradient(90deg, rgba(168,85,247,.10), rgba(255,79,216,.08)),\r\n rgba(0,0,0,.25);\r\n }\r\n\r\n .pib-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n min-width: 0;\r\n }\r\n\r\n .pib-channel-icon {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 16px;\r\n display: grid;\r\n place-items: center;\r\n background: rgba(255,255,255,.08);\r\n font-size: 24px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .pib-channel-info {\r\n min-width: 0;\r\n }\r\n\r\n .pib-channel-info h5 {\r\n margin: 0 0 5px;\r\n font-size: 17px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .pib-channel-info p {\r\n margin: 0;\r\n color: var(--soft);\r\n font-size: 14px;\r\n }\r\n\r\n .pib-right {\r\n display: flex;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end;\r\n }\r\n\r\n .tools-tabs {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .tools-tab {\r\n border: 1px solid var(--border);\r\n border-radius: 999px;\r\n color: #fff;\r\n background: rgba(255,255,255,.075);\r\n padding: 11px 16px;\r\n cursor: pointer;\r\n transition: .25s ease;\r\n }\r\n\r\n .tools-tab:hover,\r\n .tools-tab.active {\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n border-color: transparent;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .membership-cta {\r\n display: grid;\r\n grid-template-columns: minmax(0,1fr) 280px;\r\n gap: 22px;\r\n align-items: center;\r\n padding: 27px;\r\n border-radius: 30px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 32px;\r\n }\r\n\r\n .membership-cta h3 {\r\n margin: 0 0 8px;\r\n font-size: 26px;\r\n }\r\n\r\n .membership-cta p {\r\n margin: 0 0 14px;\r\n color: var(--muted);\r\n line-height: 1.7;\r\n }\r\n\r\n .membership-features {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .member-feat {\r\n font-size: 13px;\r\n color: var(--muted);\r\n background: rgba(255,255,255,.075);\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n }\r\n\r\n .membership-panel {\r\n padding: 18px;\r\n border-radius: 22px;\r\n background: rgba(0,0,0,.22);\r\n border: 1px solid rgba(216,180,254,.14);\r\n }\r\n\r\n .membership-panel strong {\r\n display: block;\r\n margin-bottom: 8px;\r\n color: #fff;\r\n }\r\n\r\n .membership-panel span {\r\n display: block;\r\n color: var(--soft);\r\n font-size: 13px;\r\n line-height: 1.6;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .newsletter-form {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n .newsletter-form input {\r\n width: 100%;\r\n padding: 13px 16px;\r\n }\r\n\r\n .grid-4 {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 18px;\r\n }\r\n\r\n .tool-card {\r\n padding: 23px;\r\n border-radius: 24px;\r\n transition: .28s ease;\r\n animation: fadeUp .6s ease both;\r\n }\r\n\r\n .tool-icon {\r\n font-size: 31px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .tool-card h4 {\r\n margin: 0 0 8px;\r\n }\r\n\r\n .tool-card p {\r\n color: var(--muted);\r\n line-height: 1.65;\r\n margin: 0 0 14px;\r\n font-size: 14px;\r\n }\r\n\r\n .tool-type {\r\n display: inline-flex;\r\n padding: 5px 9px;\r\n border-radius: 999px;\r\n background: rgba(168,85,247,.14);\r\n color: #d8b4fe;\r\n font-size: 12px;\r\n font-weight: 900;\r\n }\r\n\r\n .latest-header {\r\n text-align: left;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .latest-header .divider {\r\n margin-left: 0;\r\n }\r\n\r\n .latest-balanced-row {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) 320px;\r\n gap: 30px;\r\n align-items: stretch;\r\n }\r\n\r\n .post-stack {\r\n display: grid;\r\n gap: 18px;\r\n }\r\n\r\n .sidebar-stack {\r\n display: grid;\r\n gap: 18px;\r\n }\r\n\r\n .card {\r\n border-radius: 24px;\r\n transition: .28s ease;\r\n min-height: 0;\r\n }\r\n\r\n .post-card {\r\n display: grid;\r\n grid-template-columns: 180px minmax(0, 1fr);\r\n overflow: hidden;\r\n }\r\n\r\n .card-img-placeholder {\r\n display: grid;\r\n place-items: center;\r\n font-size: 46px;\r\n min-height: 150px;\r\n }\r\n\r\n .card-body {\r\n padding: 22px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n min-width: 0;\r\n }\r\n\r\n .card-tag {\r\n display: inline-flex;\r\n width: fit-content;\r\n padding: 5px 9px;\r\n border-radius: 999px;\r\n font-size: 12px;\r\n font-weight: 900;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .card-title {\r\n font-size: 20px;\r\n line-height: 1.45;\r\n font-weight: 950;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .card-title a:hover {\r\n color: #d8b4fe;\r\n }\r\n\r\n .card-desc {\r\n color: var(--muted);\r\n line-height: 1.7;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .card-meta {\r\n display: flex;\r\n gap: 12px;\r\n color: var(--soft);\r\n font-size: 13px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .sidebar-widget {\r\n border-radius: 24px;\r\n overflow: hidden;\r\n transition: .25s ease;\r\n min-height: 0;\r\n }\r\n\r\n .widget-title {\r\n padding: 14px 18px;\r\n font-weight: 950;\r\n border-bottom: 1px solid var(--border);\r\n font-size: 15px;\r\n }\r\n\r\n .widget-body {\r\n padding: 14px;\r\n }\r\n\r\n .search-box {\r\n display: flex;\r\n gap: 8px;\r\n width: 100%;\r\n }\r\n\r\n .search-input {\r\n min-width: 0;\r\n flex: 1;\r\n padding: 10px 13px;\r\n }\r\n\r\n .recent-post {\r\n display: flex;\r\n gap: 10px;\r\n padding: 10px 0;\r\n border-bottom: 1px solid rgba(255,255,255,.08);\r\n }\r\n\r\n .recent-post:last-child {\r\n border-bottom: 0;\r\n }\r\n\r\n .recent-post-thumb {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 13px;\r\n display: grid;\r\n place-items: center;\r\n background: rgba(255,255,255,.08);\r\n flex-shrink: 0;\r\n }\r\n\r\n .recent-post-info h5 {\r\n margin: 0 0 5px;\r\n line-height: 1.35;\r\n font-size: 13px;\r\n }\r\n\r\n .recent-post-info span {\r\n color: var(--soft);\r\n font-size: 11px;\r\n }\r\n\r\n .tag-cloud {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n }\r\n\r\n .tag {\r\n padding: 7px 10px;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,.08);\r\n color: var(--muted);\r\n font-size: 13px;\r\n transition: .2s ease;\r\n }\r\n\r\n .tag:hover {\r\n background: rgba(168,85,247,.18);\r\n color: #d8b4fe;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .latest-ads-row {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;\r\n gap: 18px;\r\n margin-top: 18px;\r\n align-items: stretch;\r\n }\r\n\r\n .latest-ads-row .ad-zone {\r\n height: 210px;\r\n margin: 0;\r\n }\r\n\r\n .newsletter-box {\r\n padding: 44px;\r\n border-radius: 34px;\r\n text-align: center;\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .newsletter-box h3 {\r\n margin: 0;\r\n font-size: clamp(28px, 5vw, 44px);\r\n }\r\n\r\n .newsletter-box p {\r\n color: var(--muted);\r\n margin: 14px 0 24px;\r\n }\r\n\r\n .newsletter-box .newsletter-form {\r\n max-width: 560px;\r\n margin: 0 auto;\r\n }\r\n\r\n footer {\r\n padding: 62px 0 28px;\r\n background: rgba(0,0,0,.3);\r\n border-top: 1px solid rgba(216,180,254,.10);\r\n }\r\n\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 1.4fr repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n .logo {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .logo-box {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 16px;\r\n display: grid;\r\n place-items: center;\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n font-size: 24px;\r\n box-shadow: 0 14px 34px rgba(168,85,247,.20);\r\n }\r\n\r\n .logo-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3px;\r\n }\r\n\r\n .logo-text span:first-child {\r\n font-weight: 950;\r\n font-size: 18px;\r\n }\r\n\r\n .logo-text span:last-child {\r\n color: var(--soft);\r\n font-size: 12px;\r\n }\r\n\r\n .footer-brand p {\r\n color: var(--muted);\r\n line-height: 1.75;\r\n max-width: 360px;\r\n }\r\n\r\n .footer-social {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 18px;\r\n }\r\n\r\n .social-icon {\r\n width: 38px;\r\n height: 38px;\r\n display: grid;\r\n place-items: center;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,.08);\r\n font-size: 13px;\r\n font-weight: 900;\r\n transition: .25s ease;\r\n }\r\n\r\n .social-icon:hover {\r\n transform: translateY(-3px);\r\n background: rgba(168,85,247,.18);\r\n }\r\n\r\n .footer-col h4 {\r\n margin: 0 0 16px;\r\n }\r\n\r\n .footer-links {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n display: grid;\r\n gap: 10px;\r\n }\r\n\r\n .footer-links a {\r\n color: var(--muted);\r\n transition: .2s ease;\r\n }\r\n\r\n .footer-links a:hover {\r\n color: #d8b4fe;\r\n }\r\n\r\n .footer-bottom {\r\n margin-top: 44px;\r\n padding-top: 20px;\r\n border-top: 1px solid rgba(216,180,254,.10);\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 16px;\r\n color: var(--soft);\r\n font-size: 14px;\r\n }\r\n\r\n .back-to-top {\r\n position: fixed;\r\n right: 20px;\r\n bottom: 20px;\r\n width: 46px;\r\n height: 46px;\r\n border: 0;\r\n border-radius: 999px;\r\n color: #fff;\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n cursor: pointer;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(12px);\r\n transition: .25s ease;\r\n z-index: 80;\r\n box-shadow: 0 16px 36px rgba(168,85,247,.25);\r\n }\r\n\r\n .back-to-top.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n .toast {\r\n position: fixed;\r\n left: 50%;\r\n bottom: 28px;\r\n z-index: 120;\r\n transform: translateX(-50%) translateY(20px);\r\n background: rgba(8,4,18,.94);\r\n color: #fff;\r\n padding: 13px 18px;\r\n border-radius: 999px;\r\n border: 1px solid var(--border);\r\n box-shadow: var(--shadow);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: .25s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .toast.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateX(-50%) translateY(0);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .grid-4 {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .latest-balanced-row,\r\n .latest-ads-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .footer-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .membership-cta {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .site-header-placeholder {\r\n height: 58px;\r\n }\r\n\r\n .hero {\r\n padding-top: 24px;\r\n }\r\n\r\n .hero-video-frame {\r\n aspect-ratio: 16 \/ 9;\r\n border-radius: 24px;\r\n }\r\n\r\n .hero-badge-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .hero-badge {\r\n justify-content: center;\r\n text-align: center;\r\n }\r\n\r\n .hero-sound-actions {\r\n width: 100%;\r\n }\r\n\r\n .hero-sound-toggle,\r\n .hero-next-video,\r\n .hero-loop-toggle {\r\n flex: 1;\r\n text-align: center;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 44px;\r\n }\r\n\r\n .hero p {\r\n font-size: 16px;\r\n }\r\n\r\n .stats-bar {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .cat-grid {\r\n gap: 12px;\r\n }\r\n .cat-card {\r\n min-width: 180px;\r\n max-width: 200px;\r\n padding: 18px;\r\n }\r\n\r\n .player-input-bar {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .player-input-actions {\r\n width: 100%;\r\n }\r\n\r\n .mini-btn {\r\n flex: 1;\r\n }\r\n\r\n .grid-4 {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .player-info-bar {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .pib-right {\r\n justify-content: flex-start;\r\n }\r\n\r\n .post-card {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .newsletter-box {\r\n padding: 30px 20px;\r\n }\r\n\r\n .newsletter-form {\r\n flex-direction: column;\r\n }\r\n\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .footer-bottom {\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Mini Games \u2500\u2500 *\/\r\n .games-section { padding: 76px 0; }\r\n .games-grid {\r\n display: grid;\r\n grid-template-columns: repeat(6, 1fr);\r\n gap: 16px;\r\n }\r\n .game-card {\r\n position: relative; overflow: hidden;\r\n padding: 24px 18px; border-radius: 24px;\r\n background: var(--card); border: 1px solid var(--border);\r\n backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\r\n cursor: pointer; transition: .3s ease; text-align: center;\r\n }\r\n .game-card:hover {\r\n background: rgba(168,85,247,.14); border-color: rgba(216,180,254,.32);\r\n transform: translateY(-6px);\r\n box-shadow: 0 22px 60px rgba(20,8,45,.42), 0 0 32px rgba(168,85,247,.14);\r\n }\r\n .game-card-icon { font-size: 42px; margin-bottom: 10px; }\r\n .game-card h4 { margin: 0 0 6px; font-size: 15px; }\r\n .game-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }\r\n\r\n \/* Game Modal *\/\r\n .game-modal-overlay {\r\n position: fixed; inset: 0; z-index: 200;\r\n background: rgba(4,2,10,.88);\r\n backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n display: none; place-items: center;\r\n }\r\n .game-modal-overlay.open { display: grid; }\r\n .game-modal {\r\n position: relative;\r\n width: min(560px, calc(100vw - 40px));\r\n max-height: calc(100vh - 60px);\r\n overflow-y: auto;\r\n background: linear-gradient(145deg, rgba(20,12,40,.96), rgba(12,6,28,.98));\r\n border: 1px solid rgba(216,180,254,.22);\r\n border-radius: 28px;\r\n box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 60px rgba(168,85,247,.15);\r\n padding: 28px;\r\n }\r\n .game-modal-close {\r\n position: absolute; top: 14px; right: 14px;\r\n width: 36px; height: 36px; border-radius: 999px;\r\n border: 1px solid rgba(216,180,254,.2);\r\n background: rgba(255,255,255,.08); color: #fff;\r\n font-size: 18px; cursor: pointer; transition: .2s ease;\r\n display: grid; place-items: center;\r\n }\r\n .game-modal-close:hover { background: rgba(255,79,216,.2); transform: scale(1.1); }\r\n .game-modal h3 { margin: 0 0 18px; font-size: 22px; text-align: center; }\r\n .game-area {\r\n min-height: 300px;\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n gap: 14px;\r\n }\r\n .game-btn {\r\n border: 0; border-radius: 999px; padding: 11px 22px;\r\n background: linear-gradient(135deg, #a855f7, #6d5dfc);\r\n color: #fff; font-weight: 800; cursor: pointer; transition: .2s ease;\r\n }\r\n .game-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(168,85,247,.3); }\r\n .game-score {\r\n font-size: 20px; font-weight: 900;\r\n background: linear-gradient(90deg, #c084fc, #8be9ff);\r\n -webkit-background-clip: text; background-clip: text; color: transparent;\r\n }\r\n .game-grid-cells {\r\n display: grid; gap: 6px; user-select: none;\r\n }\r\n .game-cell {\r\n display: grid; place-items: center;\r\n border-radius: 12px; cursor: pointer;\r\n transition: .15s ease; font-weight: 800;\r\n }\r\n .game-cell:hover { transform: scale(1.05); }\r\n\r\n @media (max-width: 1024px) {\r\n .games-grid { grid-template-columns: repeat(3, 1fr); }\r\n }\r\n @media (max-width: 768px) {\r\n .games-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .container {\r\n width: min(100% - 24px, var(--container));\r\n }\r\n\r\n .stats-bar {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .osd-vol {\r\n display: none;\r\n }\r\n\r\n .toast {\r\n width: calc(100% - 28px);\r\n text-align: center;\r\n white-space: normal;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"particle-field\" id=\"particleField\"><\/div>\r\n\r\n <header class=\"site-header-placeholder\">\r\n <div class=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"container\">\r\n <div class=\"ad-real-banner\" id=\"topAdBanner\">\r\n <span class=\"ad-label\">AD<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n <div class=\"hero-particles\"><\/div>\r\n\r\n <div class=\"container hero-layout\">\r\n <section class=\"hero-videos\" aria-label=\"Featured Videos\">\r\n <div class=\"hero-video-frame\">\r\n <video\r\n id=\"heroVideo\"\r\n autoplay\r\n muted\r\n playsinline\r\n controls\r\n controlsList=\"nodownload\"\r\n disablepictureinpicture\r\n oncontextmenu=\"return false;\"\r\n preload=\"metadata\">\r\n <\/video>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge-row\">\r\n <div class=\"hero-badge\">\ud83c\udf3f  24\/7 Relaxation Companion<\/div>\r\n\r\n <div class=\"hero-sound-actions\">\r\n <button class=\"hero-sound-toggle\" type=\"button\" id=\"heroSoundToggle\">\ud83d\udd07 Unmute<\/button>\r\n <button class=\"hero-next-video\" type=\"button\" id=\"heroNextVideo\">\u23ed Next Video<\/button>\r\n <button class=\"hero-loop-toggle\" type=\"button\" id=\"heroLoopToggle\">\ud83d\udd01 Playlist<\/button>\r\n <button class=\"hero-size-toggle\" type=\"button\" id=\"heroSizeToggle\">\ud83d\udd32 Resize<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <h1>\r\n Release Stress,<br \/>\r\n <span class=\"gradient-text\">Find Your Inner Peace<\/span>\r\n <\/h1>\r\n\r\n <p>Curated nature sounds, healing music, and ancient Five Tone therapy. Deeply relax in minutes, anytime, anywhere.<\/p>\r\n\r\n <div class=\"hero-buttons\">\r\n <a href=\"#miniGames\" class=\"btn btn-primary\">\ud83c\udfae Stress Relief Games<\/a>\r\n <a href=\"#m3u8Player\" class=\"btn btn-outline\">\ud83d\udcfa Free Player<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"container\">\r\n <div class=\"ad-zone ad-inline\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 Ad Space \u00b7 320\u00d7100 In-content<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <section style=\"padding: 50px 0;\">\r\n <div class=\"container\">\r\n <div class=\"stats-bar\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-count=\"500\" data-suffix=\"+\">0<\/div>\r\n <div class=\"stat-label\">\ud83c\udfb5 Audio\/Video Resources<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-count=\"50000\" data-suffix=\"+\">0<\/div>\r\n <div class=\"stat-label\">\ud83d\udc65 Monthly Active Users<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-count=\"14\" data-suffix=\"\">0<\/div>\r\n <div class=\"stat-label\">\ud83d\udcc2 Media Categories<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-count=\"99\" data-suffix=\"%\">0<\/div>\r\n <div class=\"stat-label\">\ud83d\ude0a Satisfaction Rate<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-tag\">EXPLORE<\/div>\r\n <h2>Choose Your <span class=\"gradient-text\">Relaxation Style<\/span><\/h2>\r\n <p>Five categories covering all your mind-body relaxation needs<\/p>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"cat-carousel-wrap\">\r\n <div class=\"cat-arrow cat-arrow-left\" id=\"catArrowLeft\">\u2190<\/div>\r\n <div class=\"cat-arrow cat-arrow-right\" id=\"catArrowRight\">\u2192<\/div>\r\n <div class=\"cat-grid\" id=\"catGrid\">\r\n <a href=\"nature.html\" class=\"cat-card\">\r\n <div class=\"cat-icon\" style=\"background:rgba(168,85,247,.15);color:#d8b4fe;\">\ud83c\udf3f<\/div>\r\n <h3>Nature Sounds<\/h3>\r\n <p>Rain, ocean waves, forest wind \u2014 return to nature<\/p>\r\n <span class=\"cat-count\">120+ audios<\/span>\r\n <\/a>\r\n\r\n <a href=\"animals.html\" class=\"cat-card\">\r\n <div class=\"cat-icon\" style=\"background:rgba(255,79,216,.15);color:#ff9ee8;\">\ud83d\udc31<\/div>\r\n <h3>Animal Therapy<\/h3>\r\n <p>Cat purrs, bird songs, whale sounds \u2014 healing companions<\/p>\r\n <span class=\"cat-count\">80+ audios<\/span>\r\n <\/a>\r\n\r\n <a href=\"frequency.html\" class=\"cat-card\">\r\n <div class=\"cat-icon\" style=\"background:rgba(139,233,255,.15);color:#8be9ff;\">\u301c<\/div>\r\n <h3>Frequency Music<\/h3>\r\n <p>432Hz, 528Hz and other healing frequency music for deep relaxation<\/p>\r\n <span class=\"cat-count\">60+ audios<\/span>\r\n <\/a>\r\n\r\n <a href=\"instruments.html\" class=\"cat-card\">\r\n <div class=\"cat-icon\" style=\"background:rgba(255,79,216,.15);color:#ff9ee8;\">\ud83c\udfb9<\/div>\r\n <h3>Instruments<\/h3>\r\n <p>Piano, Guqin, Singing Bowls \u2014 immersive sound healing<\/p>\r\n <span class=\"cat-count\">90+ audios<\/span>\r\n <\/a>\r\n\r\n <a href=\"five-tones.html\" class=\"cat-card\">\r\n <div class=\"cat-icon\" style=\"background:rgba(168,85,247,.15);color:#d8b4fe;\">\u5bab<\/div>\r\n <h3>Five Tones<\/h3>\r\n <p>TCM Five Tones (Gong Shang Jue Zhi Yu) for organ health<\/p>\r\n <span class=\"cat-count\">50+ audios<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u2550\u2550 Casual Mini Games \u2550\u2550 -->\r\n <section class=\"games-section\" id=\"miniGames\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-tag\">MINI GAMES<\/div>\r\n <h2>\ud83c\udfae <span class=\"gradient-text\">Casual Stress Relief Games<\/span><\/h2>\r\n <p>Click to play, no download needed \u00b7 18 curated mini games for instant relaxation<\/p>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"games-grid\">\r\n <div class=\"game-card\" data-game=\"reaction\">\r\n <div class=\"game-card-icon\">\u26a1<\/div>\r\n <h4>Reaction Test<\/h4>\r\n <p>Click as fast as you can when the screen turns green<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"colorFind\">\r\n <div class=\"game-card-icon\">\ud83c\udfa8<\/div>\r\n <h4>Color Find<\/h4>\r\n <p>Find the block with a different color<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"memory\">\r\n <div class=\"game-card-icon\">\ud83c\udccf<\/div>\r\n <h4>Memory Cards<\/h4>\r\n <p>Flip and match pairs to test your memory<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"whack\">\r\n <div class=\"game-card-icon\">\ud83d\udc39<\/div>\r\n <h4>Whack-a-Mole<\/h4>\r\n <p>Moles pop up randomly, click fast to score<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"math\">\r\n <div class=\"game-card-icon\">\ud83e\uddee<\/div>\r\n <h4>Quick Math<\/h4>\r\n <p>Timed questions, how fast can you calculate?<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"snake\">\r\n <div class=\"game-card-icon\">\ud83d\udc0d<\/div>\r\n <h4>Snake<\/h4>\r\n <p>Classic retro game \u2014 eat and grow<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"puzzle2048\">\r\n <div class=\"game-card-icon\">\ud83d\udd22<\/div>\r\n <h4>2048<\/h4>\r\n <p>Slide and merge numbers for the highest score<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"rps\">\r\n <div class=\"game-card-icon\">\u2702\ufe0f<\/div>\r\n <h4>Rock Paper Scissors<\/h4>\r\n <p>Play against the computer, best of three<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"bubble\">\r\n <div class=\"game-card-icon\">\ud83e\udee7<\/div>\r\n <h4>Bubble Pop<\/h4>\r\n <p>Pop floating bubbles, faster means more points<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"typing\">\r\n <div class=\"game-card-icon\">\u2328\ufe0f<\/div>\r\n <h4>Typing Race<\/h4>\r\n <p>Letters fall from above, type fast to clear them<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"bubbleWrap\">\r\n <div class=\"game-card-icon\">\ud83e\udee7<\/div>\r\n <h4>Bubble Wrap<\/h4>\r\n <p>Pop! Burst every bubble for satisfying stress relief<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"sandPaint\">\r\n <div class=\"game-card-icon\">\ud83c\udfa8<\/div>\r\n <h4>Sand Art<\/h4>\r\n <p>Draw flowing sand particles, therapeutic art<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"fruitSlice\">\r\n <div class=\"game-card-icon\">\ud83c\udf49<\/div>\r\n <h4>Fruit Slice<\/h4>\r\n <p>Fruits pop up from below, click to slice and score<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"cloudRain\">\r\n <div class=\"game-card-icon\">\ud83c\udf27\ufe0f<\/div>\r\n <h4>Cloud Rain<\/h4>\r\n <p>Click clouds, raindrops fall, listen and relax<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"slidePuzzle\">\r\n <div class=\"game-card-icon\">\ud83e\udde9<\/div>\r\n <h4>Slide Puzzle<\/h4>\r\n <p>Move numbered tiles to restore the correct order<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"iceCream\">\r\n <div class=\"game-card-icon\">\ud83c\udf66<\/div>\r\n <h4>Ice Cream Stack<\/h4>\r\n <p>Time it right to stack scoops, the higher the better<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"breakout\">\r\n <div class=\"game-card-icon\">\ud83c\udfd3<\/div>\r\n <h4>Breakout<\/h4>\r\n <p>Control the paddle to bounce the ball and break all bricks<\/p>\r\n <\/div>\r\n <div class=\"game-card\" data-game=\"tictactoe\">\r\n <div class=\"game-card-icon\">\u2b55<\/div>\r\n <h4>Tic-Tac-Toe<\/h4>\r\n <p>Play classic Tic-Tac-Toe against AI<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Game Modal -->\r\n <div class=\"game-modal-overlay\" id=\"gameModalOverlay\">\r\n <div class=\"game-modal\">\r\n <button class=\"game-modal-close\" id=\"gameModalClose\">\u2715<\/button>\r\n <h3 id=\"gameModalTitle\">Mini Game<\/h3>\r\n <div class=\"game-area\" id=\"gameArea\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"m3u8-player-section\" id=\"m3u8Player\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-tag\">FREE PLAYER<\/div>\r\n <h2>\ud83d\udcfa <span class=\"gradient-text\">Free M3U8 Player<\/span><\/h2>\r\n <p>Enter a stream URL to play, or drag and drop a local video file directly into the player<\/p>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"m3u8-player-wrapper\">\r\n <div class=\"player-input-bar\">\r\n <input\r\n id=\"streamUrlInput\"\r\n class=\"stream-url-input\"\r\n type=\"url\"\r\n placeholder=\"Enter m3u8 \/ mp4 \/ webm \/ mov video URL, auto-plays when valid link detected...\"\r\n autocomplete=\"off\"\r\n \/>\r\n <div class=\"player-input-actions\">\r\n <button class=\"mini-btn\" type=\"button\" id=\"loadUrlBtn\">Play URL<\/button>\r\n <button class=\"mini-btn\" type=\"button\" id=\"clearPlayerBtn\">Clear<\/button>\r\n <input id=\"localFileInput\" type=\"file\" accept=\"video\/*,.m3u8\" hidden \/>\r\n <button class=\"mini-btn\" type=\"button\" id=\"chooseFileBtn\">Choose Local Video<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"video-stage\" id=\"videoStage\">\r\n <video id=\"m3u8Video\" playsinline preload=\"metadata\" controlsList=\"nodownload\" disablepictureinpicture oncontextmenu=\"return false;\"><\/video>\r\n\r\n <div class=\"video-placeholder\" id=\"videoPlaceholder\">\r\n <div class=\"video-placeholder-icon\">\ud83d\udcfa<\/div>\r\n <p class=\"video-placeholder-main\">Free M3U8 Player \u2014 drag and drop video files to play<\/p>\r\n <p class=\"add-src-hint\">Or enter m3u8, mp4, webm video URLs above \u2014 auto-detect and play<\/p>\r\n <\/div>\r\n\r\n <div class=\"loading-spinner\" id=\"loadingSpinner\">\r\n <div class=\"spinner-ring\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"video-osd\">\r\n <div class=\"osd-top\">\r\n <div class=\"osd-channel-name\">\r\n <span class=\"live-badge\"><span class=\"live-dot\"><\/span>PLAYER<\/span>\r\n <span id=\"osdChannelName\">Free M3U8 Player<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"osd-bottom-panel\">\r\n <div class=\"osd-progress\" id=\"osdProgress\">\r\n <div class=\"osd-progress-fill\" id=\"osdProgressFill\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"osd-controls\">\r\n <button class=\"osd-btn osd-play\" id=\"m3u8PlayBtn\">\u25b6<\/button>\r\n <span class=\"osd-time\" id=\"m3u8Time\">00:00 \/ --:--<\/span>\r\n <div class=\"osd-spacer\"><\/div>\r\n\r\n <div class=\"osd-vol\">\r\n <span>\ud83d\udd0a<\/span>\r\n <input id=\"m3u8Volume\" type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.7\" \/>\r\n <\/div>\r\n\r\n <button class=\"osd-fullscreen\" id=\"fullscreenBtn\" title=\"Fullscreen\">\u26f6<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"player-info-bar\">\r\n <div class=\"pib-left\">\r\n <div class=\"pib-channel-icon\">\ud83d\udcfa<\/div>\r\n <div class=\"pib-channel-info\">\r\n <h5 id=\"pibTitle\">Free M3U8 Player<\/h5>\r\n <p id=\"pibDesc\">Waiting for URL input or local video file<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pib-right\">\r\n <button class=\"quality-btn active\">AUTO<\/button>\r\n <button class=\"quality-btn\">M3U8<\/button>\r\n <button class=\"quality-btn\">LOCAL<\/button>\r\n <button class=\"share-btn\" id=\"shareBtn\">\ud83d\udce4 Share<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ad-zone ad-banner\" style=\"margin-top:32px;\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 Player Banner Ad \u00b7 728\u00d790<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n <section class=\"latest-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header latest-header\">\r\n <div class=\"section-tag\">LATEST<\/div>\r\n <h2>Latest <span class=\"gradient-text\">Relaxation Articles<\/span><\/h2>\r\n <div class=\"divider\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"latest-balanced-row\">\r\n <div class=\"post-stack\">\r\n <div class=\"card post-card\">\r\n <div class=\"card-img-placeholder\" style=\"background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(139,233,255,.15));\">\ud83c\udf32<\/div>\r\n <div class=\"card-body\">\r\n <span class=\"card-tag\" style=\"background:rgba(168,85,247,.15);color:#d8b4fe;\">Nature<\/span>\r\n <div class=\"card-title\"><a href=\"nature.html\">Forest Bathing: Why Walking Among Trees Instantly Lowers Stress Hormones<\/a><\/div>\r\n <div class=\"card-desc\">Science shows a 20-minute daily forest walk can significantly reduce cortisol levels.<\/div>\r\n <div class=\"card-meta\"><span>\ud83d\udcc5 2026-03-20<\/span><span>\ud83d\udcac 12 comments<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card post-card\">\r\n <div class=\"card-img-placeholder\" style=\"background:linear-gradient(135deg,rgba(109,93,252,.22),rgba(255,79,216,.14));\">\u301c<\/div>\r\n <div class=\"card-body\">\r\n <span class=\"card-tag\" style=\"background:rgba(139,233,255,.15);color:#8be9ff;\">Frequency<\/span>\r\n <div class=\"card-title\"><a href=\"frequency.html\">432Hz vs 440Hz: Which Tuning is Better for Meditation?<\/a><\/div>\r\n <div class=\"card-desc\">432Hz is believed to be closer to natural frequencies, offering deeper relaxation.<\/div>\r\n <div class=\"card-meta\"><span>\ud83d\udcc5 2026-03-18<\/span><span>\ud83d\udcac 8 comments<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card post-card\">\r\n <div class=\"card-img-placeholder\" style=\"background:linear-gradient(135deg,rgba(255,79,216,.18),rgba(168,85,247,.22));\">\u5bab<\/div>\r\n <div class=\"card-body\">\r\n <span class=\"card-tag\" style=\"background:rgba(255,79,216,.14);color:#ff9ee8;\">Five Tones<\/span>\r\n <div class=\"card-title\"><a href=\"five-tones.html\">TCM Five Tone Therapy: Gong Shang Jue Zhi Yu & the Five Organs<\/a><\/div>\r\n <div class=\"card-desc\">Ancient TCM holds that five tones correspond to spleen, lung, liver, heart, and kidney.<\/div>\r\n <div class=\"card-meta\"><span>\ud83d\udcc5 2026-03-15<\/span><span>\ud83d\udcac 24 comments<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <aside class=\"sidebar-stack\">\r\n <div class=\"sidebar-widget\">\r\n <div class=\"widget-title\">\ud83d\udd0d Search<\/div>\r\n <div class=\"widget-body\">\r\n <div class=\"search-box\">\r\n <input class=\"search-input\" type=\"text\" placeholder=\"Enter keywords...\" \/>\r\n <button class=\"btn btn-primary\" style=\"padding:10px 14px;\">Search<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sidebar-widget\">\r\n <div class=\"widget-title\">Recent Posts<\/div>\r\n <div class=\"widget-body\">\r\n <a href=\"nature.html\" class=\"recent-post\">\r\n <div class=\"recent-post-thumb\">\ud83c\udf3f<\/div>\r\n <div class=\"recent-post-info\"><h5>Forest Bathing: Natural Stress Relief<\/h5><span>\ud83d\udcc5 2026-03-20<\/span><\/div>\r\n <\/a>\r\n\r\n <a href=\"frequency.html\" class=\"recent-post\">\r\n <div class=\"recent-post-thumb\">\u301c<\/div>\r\n <div class=\"recent-post-info\"><h5>432Hz vs 440Hz Tuning Comparison<\/h5><span>\ud83d\udcc5 2026-03-18<\/span><\/div>\r\n <\/a>\r\n\r\n <a href=\"five-tones.html\" class=\"recent-post\">\r\n <div class=\"recent-post-thumb\">\u5bab<\/div>\r\n <div class=\"recent-post-info\"><h5>TCM Five Tone Therapy Explained<\/h5><span>\ud83d\udcc5 2026-03-15<\/span><\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"sidebar-widget\">\r\n <div class=\"widget-title\">\ud83c\udff7 Tags<\/div>\r\n <div class=\"widget-body\">\r\n <div class=\"tag-cloud\">\r\n <a href=\"#\" class=\"tag\">Sleep Aid<\/a>\r\n <a href=\"#\" class=\"tag\">Meditation<\/a>\r\n <a href=\"#\" class=\"tag\">ASMR<\/a>\r\n <a href=\"#\" class=\"tag\">Frequency<\/a>\r\n <a href=\"#\" class=\"tag\">Five Tones<\/a>\r\n <a href=\"#\" class=\"tag\">Stress Relief<\/a>\r\n <a href=\"#\" class=\"tag\">528Hz<\/a>\r\n <a href=\"#\" class=\"tag\">White Noise<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n <\/div>\r\n\r\n <div class=\"latest-ads-row\">\r\n <div class=\"ad-zone\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 300\u00d7250<br \/>Below Article Ad<\/span>\r\n <\/div>\r\n\r\n <div class=\"ad-zone\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 300\u00d7250<br \/>Below Article Ad<\/span>\r\n <\/div>\r\n\r\n <div class=\"ad-zone\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 300\u00d7250<br \/>Bottom Right Ad<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section style=\"padding:50px 0;\">\r\n <div class=\"container\">\r\n <div class=\"newsletter-box\">\r\n <h3>Subscribe to Weekly <span class=\"gradient-text\">Relaxation Digest<\/span><\/h3>\r\n <p>Weekly curated relaxation audio, meditation tips, and wellness articles \u2014 completely free<\/p>\r\n\r\n <form class=\"newsletter-form\" data-newsletter-form>\r\n <input type=\"email\" placeholder=\"Enter your email address...\" required \/>\r\n <button type=\"submit\" class=\"btn btn-glow\">Subscribe Free<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"container\">\r\n <div class=\"ad-zone ad-banner ad-bottom\">\r\n <span class=\"ad-zone-label\">AD<\/span>\r\n <span>\ud83d\udce2 Bottom Ad \u00b7 728\u00d790<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <footer>\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <a href=\"index.html\" class=\"logo\">\r\n <div class=\"logo-box\">\ud83c\udf3f<\/div>\r\n <div class=\"logo-text\">\r\n <span>Relaxation Station<\/span>\r\n <span>Enjoy your peaceful life<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <p>Dedicated to providing high-quality relaxation and meditation audio resources for modern life.<\/p>\r\n\r\n <div class=\"footer-social\">\r\n <a href=\"#\" class=\"social-icon\">IN<\/a>\r\n <a href=\"#\" class=\"social-icon\">\u25b6<\/a>\r\n <a href=\"#\" class=\"social-icon\">\u266a<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Categories<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"nature.html\">Nature Sounds<\/a><\/li>\r\n <li><a href=\"animals.html\">Animal Therapy<\/a><\/li>\r\n <li><a href=\"frequency.html\">Frequency Music<\/a><\/li>\r\n <li><a href=\"instruments.html\">Instruments<\/a><\/li>\r\n <li><a href=\"five-tones.html\">Five Tones<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Tools<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"paste-frequency.html\">Frequency Generator<\/a><\/li>\r\n <li><a href=\"tool-noise-mixer.html\">White Noise Mixer<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"footer-col\">\r\n <h4>Contact Us<\/h4>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"mailto:cloneclone555777@gmail.com\">\u2709 Email Us<\/a><\/li>\r\n <li><a href=\"#\">\ud83d\udcde 750152982<\/a><\/li>\r\n <li><a href=\"#\">YouTube Channel<\/a><\/li>\r\n <li><a href=\"#\">TikTok<\/a><\/li>\r\n <li><a href=\"#\">Advertising<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Relaxation Station. All rights reserved.<\/p>\r\n <p>Nurture mind with sound \u00b7 Find peace in stillness<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <button class=\"back-to-top\" id=\"backToTop\">\u2191<\/button>\r\n <div class=\"toast\" id=\"toast\">Notice<\/div>\r\n\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\r\n\r\n <script>\r\n const R2 = \"https:\/\/videos.luckysheep.cc\";\r\n const heroVideos = [\r\n \/\/ --- Nature ziran ---\r\n R2 + \"\/ziran\/fengniaosheng.mp4\",\r\n R2 + \"\/ziran\/ForestBirdsong.mp4\",\r\n R2 + \"\/ziran\/hailangone.mp4\",\r\n R2 + \"\/ziran\/hailangtwo.mp4\",\r\n R2 + \"\/ziran\/hailangthree.mp4\",\r\n R2 + \"\/ziran\/hubianshiyu.mp4\",\r\n R2 + \"\/ziran\/linzhongshiyu.mp4\",\r\n R2 + \"\/ziran\/MountainRiver.mp4\",\r\n R2 + \"\/ziran\/senlinxiliuniaoming.mp4\",\r\n R2 + \"\/ziran\/xiliu.mp4\",\r\n \/\/ --- Animals ---\r\n R2 + \"\/dongwu\/BirdSounds.mp4\",\r\n R2 + \"\/dongwu\/cat01.mp4\",\r\n R2 + \"\/dongwu\/cat02.mp4\",\r\n R2 + \"\/dongwu\/chitangwa-1.mp4\",\r\n R2 + \"\/dongwu\/chitangwa-2.mp4\",\r\n R2 + \"\/dongwu\/chitangwa-3.mp4\",\r\n R2 + \"\/dongwu\/Morning Birds-2.mp4\",\r\n R2 + \"\/dongwu\/Morning Birds-3.mp4\",\r\n R2 + \"\/dongwu\/Morning Birds-4.mp4\",\r\n R2 + \"\/dongwu\/MorningBirds-1.mp4\",\r\n R2 + \"\/dongwu\/qinchenchongming.mp4\",\r\n R2 + \"\/dongwu\/SleepingCats .mp4\",\r\n R2 + \"\/dongwu\/tianjian.mp4\",\r\n R2 + \"\/dongwu\/zhenshiwajiao.mp4\",\r\n \/\/ --- Campfire ---\r\n R2 + \"\/gouhuo\/CampfirebytheRiver.mp4\",\r\n R2 + \"\/gouhuo\/RealForestCampfire.mp4\",\r\n \/\/ --- Frequency pinglv ---\r\n R2 + \"\/pinglv\/12-20\u653e\u677e\u89e3\u538bhz.mp4\",\r\n R2 + \"\/pinglv\/174\u6cbb\u6108FrequencyHZ.mp4\",\r\n R2 + \"\/pinglv\/285\u56de\u6625\u8d6b\u5179HZ.mp4\",\r\n R2 + \"\/pinglv\/40HZ.mp4\",\r\n R2 + \"\/pinglv\/417\u80fd\u91cf\u51c0\u5316Hz.mp4\",\r\n R2 + \"\/pinglv\/528-1\u60c5\u7eea\u91ca\u653e.mp4\",\r\n R2 + \"\/pinglv\/528-2\u60c5\u7eea\u91ca\u653e.mp4\",\r\n R2 + \"\/pinglv\/963HZ.mp4\",\r\n \/\/ --- Five Tones wuyin ---\r\n R2 + \"\/wuyin\/xgy.mp4\",\r\n R2 + \"\/wuyin\/xzy.mp4\",\r\n R2 + \"\/wuyin\/xjy.mp4\",\r\n R2 + \"\/wuyin\/xsy.mp4\",\r\n R2 + \"\/wuyin\/xyy.mp4\",\r\n \/\/ --- Instruments ---\r\n R2 + \"\/yueqi\/\u591c\u7684\u94a2\u7434\u66f2.mp4\",\r\n R2 + \"\/yueqi\/\u5929\u7a7a\u4e4b\u57ce.mp4\",\r\n R2 + \"\/yueqi\/\u5973\u513f\u7f8e\u53e4\u7b5d.mp4\",\r\n R2 + \"\/yueqi\/\u6881\u795d.mp4\",\r\n R2 + \"\/yueqi\/\u79cb\u65e5\u7684\u79c1\u8bed.mp4\",\r\n R2 + \"\/yueqi\/\u9752\u82b1\u74f7.mp4\"\r\n ];\r\n\r\n\r\n let hlsInstance = null;\r\n let currentObjectUrl = null;\r\n let streamInputTimer = null;\r\n let currentHeroVideoIndex = 0;\r\n\r\n function showToast(message, icon = \"\u2705\") {\r\n const toast = document.getElementById(\"toast\");\r\n if (!toast) return;\r\n\r\n toast.textContent = `${icon} ${message}`;\r\n toast.classList.add(\"show\");\r\n\r\n clearTimeout(window.__toastTimer);\r\n window.__toastTimer = setTimeout(() => {\r\n toast.classList.remove(\"show\");\r\n }, 2300);\r\n }\r\n\r\n window.showToast = showToast;\r\n\r\n function initParticleField() {\r\n const field = document.getElementById(\"particleField\");\r\n if (!field) return;\r\n\r\n const particleCount = window.innerWidth < 768 ? 80 : 135;\r\n const fragment = document.createDocumentFragment();\r\n const screenMax = Math.max(window.innerWidth, window.innerHeight);\r\n\r\n for (let i = 0; i < particleCount; i += 1) {\r\n const dot = document.createElement(\"span\");\r\n dot.className = \"particle-dot\";\r\n\r\n const angle = Math.random() * Math.PI * 2;\r\n const startRadius = Math.random() * screenMax * 0.18;\r\n const endRadius = screenMax * (0.66 + Math.random() * 0.58);\r\n\r\n const startX = Math.cos(angle) * startRadius;\r\n const startY = Math.sin(angle) * startRadius;\r\n\r\n const drift = (Math.random() - 0.5) * 0.95;\r\n const endAngle = angle + drift;\r\n\r\n const endX = Math.cos(endAngle) * endRadius;\r\n const endY = Math.sin(endAngle) * endRadius;\r\n\r\n const size = 2.6 + Math.random() * 4.2;\r\n const duration = 8 + Math.random() * 13;\r\n const delay = -Math.random() * duration;\r\n const opacity = 0.24 + Math.random() * 0.52;\r\n\r\n dot.style.setProperty(\"--start-x\", `${startX}px`);\r\n dot.style.setProperty(\"--start-y\", `${startY}px`);\r\n dot.style.setProperty(\"--end-x\", `${endX}px`);\r\n dot.style.setProperty(\"--end-y\", `${endY}px`);\r\n dot.style.setProperty(\"--dot-size\", `${size}px`);\r\n dot.style.setProperty(\"--duration\", `${duration}s`);\r\n dot.style.setProperty(\"--delay\", `${delay}s`);\r\n dot.style.setProperty(\"--dot-opacity\", opacity);\r\n\r\n fragment.appendChild(dot);\r\n }\r\n\r\n field.innerHTML = \"\";\r\n field.appendChild(fragment);\r\n }\r\n\r\n function formatTime(seconds) {\r\n if (!Number.isFinite(seconds)) return \"--:--\";\r\n const mins = Math.floor(seconds \/ 60);\r\n const secs = Math.floor(seconds % 60).toString().padStart(2, \"0\");\r\n return `${mins}:${secs}`;\r\n }\r\n\r\n function pauseOtherMedia(exceptElement) {\r\n document.querySelectorAll(\"audio, video\").forEach((media) => {\r\n if (media !== exceptElement && !media.paused) {\r\n media.pause();\r\n }\r\n });\r\n }\r\n\r\n function loadHeroVideo(index, options = {}) {\r\n const heroVideo = document.getElementById(\"heroVideo\");\r\n if (!heroVideo || !heroVideos.length) return;\r\n\r\n const { keepPlaying = true } = options;\r\n currentHeroVideoIndex = (index + heroVideos.length) % heroVideos.length;\r\n\r\n const wasMuted = heroVideo.muted;\r\n const wasVolume = heroVideo.volume || 0.7;\r\n\r\n heroVideo.src = heroVideos[currentHeroVideoIndex];\r\n heroVideo.muted = wasMuted;\r\n heroVideo.volume = wasVolume;\r\n heroVideo.load();\r\n\r\n if (keepPlaying) {\r\n heroVideo.play().catch(() => {});\r\n }\r\n }\r\n\r\n function playNextHeroVideo() {\r\n const heroVideo = document.getElementById(\"heroVideo\");\r\n if (!heroVideo || !heroVideos.length) return;\r\n\r\n let next;\r\n do { next = Math.floor(Math.random() * heroVideos.length); } while (next === currentHeroVideoIndex && heroVideos.length > 1);\r\n loadHeroVideo(next, { keepPlaying: true });\r\n\r\n if (heroVideos.length > 1) {\r\n showToast(\"Switched to next video\", \"\u23ed\");\r\n } else {\r\n showToast(\"Only one video available\", \"\ud83c\udfac\");\r\n }\r\n }\r\n\r\n function initHeroSizeToggle() {\r\n const sizeBtn = document.getElementById(\"heroSizeToggle\");\r\n const frame = document.querySelector(\".hero-video-frame\");\r\n if (!sizeBtn || !frame) return;\r\n\r\n let isNative = false;\r\n\r\n sizeBtn.addEventListener(\"click\", () => {\r\n isNative = !isNative;\r\n frame.classList.toggle(\"ratio-native\", isNative);\r\n sizeBtn.textContent = isNative ? \"\ud83c\udfac Widescreen\" : \"\ud83d\udd32 Original Ratio\";\r\n showToast(isNative ? \"Switched to original ratio\" : \"Switched to widescreen mode\", \"\ud83d\udda5\");\r\n });\r\n }\r\n\r\n function initHeroVideoRotation() {\r\n const heroVideo = document.getElementById(\"heroVideo\");\r\n const nextBtn = document.getElementById(\"heroNextVideo\");\r\n\r\n if (!heroVideo || !heroVideos.length) return;\r\n\r\n heroVideo.addEventListener(\"ended\", () => {\r\n if (!heroVideo.loop) playNextHeroVideo();\r\n });\r\n\r\n nextBtn?.addEventListener(\"click\", () => {\r\n playNextHeroVideo();\r\n });\r\n\r\n loadHeroVideo(Math.floor(Math.random() * heroVideos.length), { keepPlaying: true });\r\n initHeroSizeToggle();\r\n initHeroLoopToggle();\r\n }\r\n\r\n function initHeroLoopToggle() {\r\n const loopBtn = document.getElementById(\"heroLoopToggle\");\r\n const heroVideo = document.getElementById(\"heroVideo\");\r\n if (!loopBtn || !heroVideo) return;\r\n let mode = \"playlist\"; \/\/ \"playlist\" or \"single\"\r\n loopBtn.addEventListener(\"click\", () => {\r\n if (mode === \"playlist\") {\r\n mode = \"single\";\r\n heroVideo.loop = true;\r\n loopBtn.textContent = \"\ud83d\udd02 Single\";\r\n showToast(\"Single repeat mode\", \"\ud83d\udd02\");\r\n } else {\r\n mode = \"playlist\";\r\n heroVideo.loop = false;\r\n loopBtn.textContent = \"\ud83d\udd01 Playlist\";\r\n showToast(\"Playlist loop mode\", \"\ud83d\udd01\");\r\n }\r\n });\r\n }\r\n\r\n function initHeroSound() {\r\n const heroVideo = document.getElementById(\"heroVideo\");\r\n const heroSoundToggle = document.getElementById(\"heroSoundToggle\");\r\n\r\n if (!heroVideo || !heroSoundToggle) return;\r\n\r\n heroSoundToggle.addEventListener(\"click\", async () => {\r\n heroVideo.muted = !heroVideo.muted;\r\n\r\n if (!heroVideo.muted) {\r\n heroVideo.volume = 0.7;\r\n pauseOtherMedia(heroVideo);\r\n\r\n try {\r\n await heroVideo.play();\r\n } catch (error) {\r\n showToast(\"Browser blocked autoplay, please click again\", \"\u26a0\ufe0f\");\r\n }\r\n\r\n heroSoundToggle.textContent = \"\ud83d\udd0a Sound On\";\r\n heroSoundToggle.classList.add(\"is-on\");\r\n } else {\r\n heroSoundToggle.textContent = \"\ud83d\udd07 Unmute\";\r\n heroSoundToggle.classList.remove(\"is-on\");\r\n }\r\n });\r\n }\r\n\r\n function animateStats() {\r\n const stats = document.querySelectorAll(\".stat-number\");\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry) => {\r\n if (!entry.isIntersecting) return;\r\n\r\n const el = entry.target;\r\n const target = Number(el.dataset.count || 0);\r\n const suffix = el.dataset.suffix || \"\";\r\n const duration = 1300;\r\n const start = performance.now();\r\n\r\n function tick(now) {\r\n const progress = Math.min((now - start) \/ duration, 1);\r\n const eased = 1 - Math.pow(1 - progress, 3);\r\n el.textContent = Math.floor(target * eased).toLocaleString() + suffix;\r\n\r\n if (progress < 1) requestAnimationFrame(tick);\r\n }\r\n\r\n requestAnimationFrame(tick);\r\n observer.unobserve(el);\r\n });\r\n }, { threshold: 0.35 });\r\n\r\n stats.forEach((stat) => observer.observe(stat));\r\n }\r\n\r\n function isProbablyVideoUrl(value) {\r\n if (!value) return false;\r\n const url = value.trim();\r\n\r\n if (!\/^https?:\\\/\\\/\/i.test(url) && !\/^blob:\/i.test(url)) {\r\n return false;\r\n }\r\n\r\n return \/\\.(m3u8|mp4|webm|mov|m4v|ogg)(\\?.*)?$\/i.test(url) || url.includes(\".m3u8\") || url.includes(\"playlist\");\r\n }\r\n\r\n function destroyHls() {\r\n if (hlsInstance) {\r\n hlsInstance.destroy();\r\n hlsInstance = null;\r\n }\r\n }\r\n\r\n function revokeObjectUrl() {\r\n if (currentObjectUrl) {\r\n URL.revokeObjectURL(currentObjectUrl);\r\n currentObjectUrl = null;\r\n }\r\n }\r\n\r\n function updatePlayerInfo(title, desc) {\r\n const osdChannelName = document.getElementById(\"osdChannelName\");\r\n const pibTitle = document.getElementById(\"pibTitle\");\r\n const pibDesc = document.getElementById(\"pibDesc\");\r\n\r\n if (osdChannelName) osdChannelName.textContent = title;\r\n if (pibTitle) pibTitle.textContent = title;\r\n if (pibDesc) pibDesc.textContent = desc;\r\n }\r\n\r\n async function playVideoSource(source, options = {}) {\r\n const video = document.getElementById(\"m3u8Video\");\r\n const videoStage = document.getElementById(\"videoStage\");\r\n const placeholder = document.getElementById(\"videoPlaceholder\");\r\n const loadingSpinner = document.getElementById(\"loadingSpinner\");\r\n const playBtn = document.getElementById(\"m3u8PlayBtn\");\r\n\r\n if (!video || !source) return;\r\n\r\n const { title = \"Free M3U8 Player\", desc = \"Playing video content\", isLocal = false } = options;\r\n\r\n destroyHls();\r\n if (!isLocal) revokeObjectUrl();\r\n\r\n pauseOtherMedia(video);\r\n loadingSpinner?.classList.add(\"show\");\r\n placeholder.style.display = \"none\";\r\n videoStage.classList.add(\"has-video\");\r\n\r\n video.pause();\r\n video.removeAttribute(\"src\");\r\n video.load();\r\n\r\n const isM3u8 = \/\\.m3u8(\\?.*)?$\/i.test(source) || source.includes(\".m3u8\");\r\n\r\n try {\r\n if (isM3u8 && window.Hls && Hls.isSupported()) {\r\n hlsInstance = new Hls({\r\n enableWorker: true,\r\n lowLatencyMode: true\r\n });\r\n\r\n hlsInstance.loadSource(source);\r\n hlsInstance.attachMedia(video);\r\n\r\n hlsInstance.on(Hls.Events.MANIFEST_PARSED, async () => {\r\n video.volume = 0.7;\r\n await video.play();\r\n playBtn.textContent = \"\u23f8\";\r\n loadingSpinner?.classList.remove(\"show\");\r\n });\r\n\r\n hlsInstance.on(Hls.Events.ERROR, (event, data) => {\r\n if (data.fatal) {\r\n loadingSpinner?.classList.remove(\"show\");\r\n showToast(\"Playback failed, check if URL is accessible\", \"\u26a0\ufe0f\");\r\n }\r\n });\r\n } else {\r\n video.src = source;\r\n video.volume = 0.7;\r\n\r\n video.addEventListener(\"loadedmetadata\", async function handleLoaded() {\r\n video.removeEventListener(\"loadedmetadata\", handleLoaded);\r\n await video.play();\r\n playBtn.textContent = \"\u23f8\";\r\n loadingSpinner?.classList.remove(\"show\");\r\n });\r\n }\r\n\r\n updatePlayerInfo(title, desc);\r\n } catch (error) {\r\n loadingSpinner?.classList.remove(\"show\");\r\n placeholder.style.display = \"grid\";\r\n videoStage.classList.remove(\"has-video\");\r\n showToast(\"Playback failed, check video URL or format\", \"\u26a0\ufe0f\");\r\n }\r\n }\r\n\r\n function initM3u8Player() {\r\n const video = document.getElementById(\"m3u8Video\");\r\n const videoStage = document.getElementById(\"videoStage\");\r\n const playerWrapper = document.querySelector(\".m3u8-player-wrapper\");\r\n const streamUrlInput = document.getElementById(\"streamUrlInput\");\r\n const loadUrlBtn = document.getElementById(\"loadUrlBtn\");\r\n const clearPlayerBtn = document.getElementById(\"clearPlayerBtn\");\r\n const chooseFileBtn = document.getElementById(\"chooseFileBtn\");\r\n const localFileInput = document.getElementById(\"localFileInput\");\r\n const playBtn = document.getElementById(\"m3u8PlayBtn\");\r\n const volume = document.getElementById(\"m3u8Volume\");\r\n const fullscreenBtn = document.getElementById(\"fullscreenBtn\");\r\n const shareBtn = document.getElementById(\"shareBtn\");\r\n const progress = document.getElementById(\"osdProgress\");\r\n const progressFill = document.getElementById(\"osdProgressFill\");\r\n const timeText = document.getElementById(\"m3u8Time\");\r\n const placeholder = document.getElementById(\"videoPlaceholder\");\r\n const loadingSpinner = document.getElementById(\"loadingSpinner\");\r\n\r\n if (!video || !videoStage) return;\r\n\r\n function playFromInput() {\r\n const url = streamUrlInput.value.trim();\r\n\r\n if (!url) {\r\n showToast(\"Please enter a video URL first\", \"\ud83d\udcfa\");\r\n return;\r\n }\r\n\r\n if (!isProbablyVideoUrl(url)) {\r\n showToast(\"Please enter a valid video URL (m3u8, mp4, webm)\", \"\u26a0\ufe0f\");\r\n return;\r\n }\r\n\r\n playVideoSource(url, {\r\n title: url.includes(\".m3u8\") ? \"M3U8 Streaming\" : \"Online Video Playing\",\r\n desc: url\r\n });\r\n }\r\n\r\n streamUrlInput.addEventListener(\"input\", () => {\r\n clearTimeout(streamInputTimer);\r\n const value = streamUrlInput.value.trim();\r\n\r\n streamInputTimer = setTimeout(() => {\r\n if (isProbablyVideoUrl(value)) {\r\n playFromInput();\r\n }\r\n }, 700);\r\n });\r\n\r\n streamUrlInput.addEventListener(\"keydown\", (event) => {\r\n if (event.key === \"Enter\") {\r\n event.preventDefault();\r\n playFromInput();\r\n }\r\n });\r\n\r\n loadUrlBtn.addEventListener(\"click\", playFromInput);\r\n\r\n chooseFileBtn.addEventListener(\"click\", () => {\r\n localFileInput.click();\r\n });\r\n\r\n localFileInput.addEventListener(\"change\", () => {\r\n const file = localFileInput.files?.[0];\r\n if (!file) return;\r\n playLocalFile(file);\r\n });\r\n\r\n function playLocalFile(file) {\r\n destroyHls();\r\n revokeObjectUrl();\r\n\r\n currentObjectUrl = URL.createObjectURL(file);\r\n\r\n if (streamUrlInput) {\r\n streamUrlInput.value = \"\";\r\n }\r\n\r\n playVideoSource(currentObjectUrl, {\r\n title: \"Local Video Playing\",\r\n desc: file.name,\r\n isLocal: true\r\n });\r\n }\r\n\r\n videoStage.addEventListener(\"dragover\", (event) => {\r\n event.preventDefault();\r\n videoStage.classList.add(\"drag-over\");\r\n });\r\n\r\n videoStage.addEventListener(\"dragleave\", () => {\r\n videoStage.classList.remove(\"drag-over\");\r\n });\r\n\r\n videoStage.addEventListener(\"drop\", (event) => {\r\n event.preventDefault();\r\n videoStage.classList.remove(\"drag-over\");\r\n\r\n const file = event.dataTransfer.files?.[0];\r\n\r\n if (!file) return;\r\n\r\n if (!file.type.startsWith(\"video\/\") && !file.name.toLowerCase().endsWith(\".m3u8\")) {\r\n showToast(\"Please drop a video file\", \"\u26a0\ufe0f\");\r\n return;\r\n }\r\n\r\n playLocalFile(file);\r\n });\r\n\r\n playBtn.addEventListener(\"click\", async () => {\r\n if (!video.src) {\r\n showToast(\"Enter a URL or drop a video file first\", \"\ud83d\udcfa\");\r\n return;\r\n }\r\n\r\n if (video.paused) {\r\n pauseOtherMedia(video);\r\n await video.play();\r\n playBtn.textContent = \"\u23f8\";\r\n } else {\r\n video.pause();\r\n playBtn.textContent = \"\u25b6\";\r\n }\r\n });\r\n\r\n video.addEventListener(\"play\", () => {\r\n pauseOtherMedia(video);\r\n playBtn.textContent = \"\u23f8\";\r\n playerWrapper?.classList.add(\"playing\");\r\n });\r\n\r\n video.addEventListener(\"pause\", () => {\r\n playBtn.textContent = \"\u25b6\";\r\n playerWrapper?.classList.remove(\"playing\");\r\n });\r\n\r\n video.addEventListener(\"ended\", () => {\r\n playerWrapper?.classList.remove(\"playing\");\r\n });\r\n\r\n video.addEventListener(\"waiting\", () => {\r\n loadingSpinner?.classList.add(\"show\");\r\n });\r\n\r\n video.addEventListener(\"playing\", () => {\r\n loadingSpinner?.classList.remove(\"show\");\r\n placeholder.style.display = \"none\";\r\n videoStage.classList.add(\"has-video\");\r\n });\r\n\r\n video.addEventListener(\"error\", () => {\r\n loadingSpinner?.classList.remove(\"show\");\r\n showToast(\"Video load failed, link may be expired or blocked\", \"\u26a0\ufe0f\");\r\n });\r\n\r\n video.addEventListener(\"timeupdate\", () => {\r\n const percent = video.duration ? (video.currentTime \/ video.duration) * 100 : 0;\r\n progressFill.style.width = `${percent}%`;\r\n timeText.textContent = `${formatTime(video.currentTime)} \/ ${formatTime(video.duration)}`;\r\n });\r\n\r\n progress.addEventListener(\"click\", (event) => {\r\n if (!video.duration) return;\r\n\r\n const rect = progress.getBoundingClientRect();\r\n const percent = (event.clientX - rect.left) \/ rect.width;\r\n video.currentTime = video.duration * percent;\r\n });\r\n\r\n volume.addEventListener(\"input\", () => {\r\n video.volume = Number(volume.value);\r\n });\r\n\r\n fullscreenBtn.addEventListener(\"click\", () => {\r\n if (videoStage.requestFullscreen) {\r\n videoStage.requestFullscreen();\r\n }\r\n });\r\n\r\n clearPlayerBtn.addEventListener(\"click\", () => {\r\n destroyHls();\r\n revokeObjectUrl();\r\n\r\n video.pause();\r\n video.removeAttribute(\"src\");\r\n video.load();\r\n\r\n streamUrlInput.value = \"\";\r\n progressFill.style.width = \"0%\";\r\n timeText.textContent = \"00:00 \/ --:--\";\r\n playBtn.textContent = \"\u25b6\";\r\n placeholder.style.display = \"grid\";\r\n loadingSpinner?.classList.remove(\"show\");\r\n videoStage.classList.remove(\"has-video\");\r\n\r\n updatePlayerInfo(\"Free M3U8 Player\", \"Waiting for URL input or local video file\");\r\n showToast(\"Player cleared\", \"\ud83e\uddf9\");\r\n });\r\n\r\n shareBtn.addEventListener(\"click\", async () => {\r\n try {\r\n await navigator.clipboard?.writeText(location.href);\r\n showToast(\"Link copied\", \"\ud83d\udccb\");\r\n } catch (error) {\r\n showToast(\"Copy failed, please copy from address bar\", \"\u26a0\ufe0f\");\r\n }\r\n });\r\n\r\n video.volume = 0.7;\r\n }\r\n\r\n\r\n function initNewsletter() {\r\n document.querySelectorAll(\"[data-newsletter-form]\").forEach((form) => {\r\n form.addEventListener(\"submit\", (event) => {\r\n event.preventDefault();\r\n showToast(\"Submitted! We'll process it soon\", \"\ud83d\udc8c\");\r\n const input = form.querySelector(\"input\");\r\n if (input) input.value = \"\";\r\n });\r\n });\r\n }\r\n\r\n function initBackToTop() {\r\n const btn = document.getElementById(\"backToTop\");\r\n if (!btn) return;\r\n\r\n window.addEventListener(\"scroll\", () => {\r\n btn.classList.toggle(\"show\", window.scrollY > 520);\r\n });\r\n\r\n btn.addEventListener(\"click\", () => {\r\n window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n });\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Game Sound Effects (Web Audio API) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n const SFX = (() => {\r\n let ctx;\r\n function getCtx() { if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)(); return ctx; }\r\n function play(freq, type, dur, vol = 0.3, ramp = true) {\r\n try {\r\n const c = getCtx(), o = c.createOscillator(), g = c.createGain();\r\n o.type = type; o.frequency.setValueAtTime(freq, c.currentTime);\r\n g.gain.setValueAtTime(vol, c.currentTime);\r\n if (ramp) g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + dur);\r\n o.connect(g); g.connect(c.destination);\r\n o.start(); o.stop(c.currentTime + dur);\r\n } catch(e) {}\r\n }\r\n function noise(dur, vol = 0.15) {\r\n try {\r\n const c = getCtx(), buf = c.createBuffer(1, c.sampleRate * dur, c.sampleRate);\r\n const d = buf.getChannelData(0);\r\n for (let i = 0; i < d.length; i++) d[i] = (Math.random() * 2 - 1) * vol;\r\n const src = c.createBufferSource(), g = c.createGain();\r\n src.buffer = buf; g.gain.setValueAtTime(vol, c.currentTime);\r\n g.gain.exponentialRampToValueAtTime(0.001, c.currentTime + dur);\r\n src.connect(g); g.connect(c.destination); src.start();\r\n } catch(e) {}\r\n }\r\n return {\r\n pop() { play(600, \"sine\", 0.08, 0.25); setTimeout(() => play(900, \"sine\", 0.05, 0.15), 30); },\r\n click() { play(1200, \"square\", 0.03, 0.1); },\r\n bubble() { play(400 + Math.random()*200, \"sine\", 0.12, 0.2); },\r\n hit() { play(220, \"sawtooth\", 0.1, 0.2); },\r\n slice() { noise(0.08, 0.2); play(800, \"sawtooth\", 0.06, 0.12); },\r\n success() { play(523, \"sine\", 0.12, 0.2); setTimeout(() => play(659, \"sine\", 0.12, 0.2), 100); setTimeout(() => play(784, \"sine\", 0.2, 0.25), 200); },\r\n fail() { play(200, \"sawtooth\", 0.3, 0.2); setTimeout(() => play(150, \"sawtooth\", 0.3, 0.15), 150); },\r\n drop() { play(300, \"sine\", 0.15, 0.15); play(150, \"sine\", 0.2, 0.1); },\r\n rain() { play(1800 + Math.random()*800, \"sine\", 0.06, 0.08); },\r\n move() { play(440, \"square\", 0.04, 0.08); },\r\n type() { play(800 + Math.random()*400, \"square\", 0.03, 0.06); },\r\n whack() { noise(0.06, 0.25); play(300, \"square\", 0.08, 0.2); },\r\n merge() { play(500, \"sine\", 0.08, 0.15); setTimeout(() => play(700, \"sine\", 0.08, 0.15), 50); },\r\n place() { play(660, \"sine\", 0.06, 0.12); },\r\n bounce() { play(440 + Math.random()*200, \"triangle\", 0.05, 0.12); },\r\n brick() { play(800 + Math.random()*400, \"square\", 0.04, 0.1); },\r\n };\r\n })();\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Mini Game System \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n let _gameCleanup = null;\r\n function openGameModal(gameId) {\r\n const overlay = document.getElementById(\"gameModalOverlay\");\r\n const area = document.getElementById(\"gameArea\");\r\n const title = document.getElementById(\"gameModalTitle\");\r\n if (!overlay || !area) return;\r\n if (_gameCleanup) { _gameCleanup(); _gameCleanup = null; }\r\n area.innerHTML = \"\";\r\n const g = gameDefs[gameId];\r\n if (!g) return;\r\n title.textContent = g.title;\r\n overlay.classList.add(\"open\");\r\n _gameCleanup = g.init(area);\r\n }\r\n function closeGameModal() {\r\n const overlay = document.getElementById(\"gameModalOverlay\");\r\n if (_gameCleanup) { _gameCleanup(); _gameCleanup = null; }\r\n document.getElementById(\"gameArea\").innerHTML = \"\";\r\n overlay.classList.remove(\"open\");\r\n }\r\n\r\n const gameDefs = {\r\n \/* 1. Reaction Test *\/\r\n reaction: { title: \"\u26a1 Reaction Test\", init(area) {\r\n let phase = \"wait\", t0, timer;\r\n const box = document.createElement(\"div\");\r\n box.style.cssText = \"width:100%;height:280px;border-radius:18px;display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;cursor:pointer;background:#1e1240;transition:background .3s\";\r\n box.textContent = \"Click to Start\";\r\n area.appendChild(box);\r\n function start() {\r\n phase = \"waiting\"; box.style.background = \"#b91c1c\"; box.textContent = \"Wait for green...\";\r\n timer = setTimeout(() => { phase = \"go\"; t0 = Date.now(); box.style.background = \"#16a34a\"; box.textContent = \"Click!\"; }, 1500 + Math.random() * 3000);\r\n }\r\n box.addEventListener(\"click\", () => {\r\n if (phase === \"wait\") { start(); }\r\n else if (phase === \"waiting\") { SFX.fail(); clearTimeout(timer); box.style.background = \"#dc2626\"; box.textContent = \"Too early! Click to retry\"; phase = \"wait\"; }\r\n else if (phase === \"go\") { SFX.success(); const ms = Date.now() - t0; box.style.background = \"#7c3aed\"; box.textContent = `${ms} ms! Click again`; phase = \"wait\"; }\r\n });\r\n return () => { clearTimeout(timer); };\r\n }},\r\n\r\n \/* 2. Color Find *\/\r\n colorFind: { title: \"\ud83c\udfa8 Color Find\", init(area) {\r\n let score = 0, level = 1;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Score: 0\";\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\";\r\n area.append(info, grid);\r\n function render() {\r\n const size = Math.min(3 + level, 7), total = size * size;\r\n grid.style.gridTemplateColumns = `repeat(${size}, 52px)`;\r\n grid.innerHTML = \"\";\r\n const hue = Math.random() * 360, diff = Math.max(8, 40 - level * 4);\r\n const target = Math.floor(Math.random() * total);\r\n for (let i = 0; i < total; i++) {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = `width:52px;height:52px;background:hsl(${hue},65%,${i === target ? 50 + diff : 50}%);`;\r\n cell.addEventListener(\"click\", () => {\r\n if (i === target) { SFX.pop(); score++; level = Math.min(level + 1, 10); info.textContent = `Score: ${score}`; render(); }\r\n else { SFX.fail(); cell.style.opacity = \"0.3\"; }\r\n });\r\n grid.appendChild(cell);\r\n }\r\n }\r\n render(); return () => {};\r\n }},\r\n\r\n \/* 3. Memory Cards *\/\r\n memory: { title: \"\ud83c\udccf Memory Cards\", init(area) {\r\n const emojis = [\"\ud83c\udf4e\",\"\ud83c\udf4b\",\"\ud83c\udf47\",\"\ud83c\udf52\",\"\ud83d\udc31\",\"\ud83d\udc36\",\"\ud83c\udf38\",\"\u2b50\"];\r\n let cards = [...emojis, ...emojis].sort(() => Math.random() - 0.5);\r\n let flipped = [], matched = new Set(), moves = 0, lock = false;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Moves: 0\";\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\"; grid.style.gridTemplateColumns = \"repeat(4, 64px)\";\r\n area.append(info, grid);\r\n cards.forEach((emoji, i) => {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = \"width:64px;height:64px;font-size:28px;background:rgba(168,85,247,.22);border:1px solid rgba(216,180,254,.2);\";\r\n cell.textContent = \"?\";\r\n cell.addEventListener(\"click\", () => {\r\n if (lock || flipped.includes(i) || matched.has(i)) return;\r\n SFX.click(); cell.textContent = emoji; cell.style.background = \"rgba(109,93,252,.35)\"; flipped.push(i);\r\n if (flipped.length === 2) {\r\n moves++; info.textContent = `Moves: ${moves}`; lock = true;\r\n const [a, b] = flipped;\r\n if (cards[a] === cards[b]) {\r\n SFX.success(); matched.add(a); matched.add(b); flipped = []; lock = false;\r\n if (matched.size === cards.length) info.textContent = `\ud83c\udf89 Cleared in ${moves} moves!`;\r\n } else {\r\n setTimeout(() => {\r\n grid.children[a].textContent = \"?\"; grid.children[a].style.background = \"rgba(168,85,247,.22)\";\r\n grid.children[b].textContent = \"?\"; grid.children[b].style.background = \"rgba(168,85,247,.22)\";\r\n flipped = []; lock = false;\r\n }, 700);\r\n }\r\n }\r\n });\r\n grid.appendChild(cell);\r\n });\r\n return () => {};\r\n }},\r\n\r\n \/* 4. Whack-a-Mole *\/\r\n whack: { title: \"\ud83d\udc39 Whack-a-Mole\", init(area) {\r\n let score = 0, timer, gameTimer, active = -1, running = false;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Click Start \u00b7 30s\";\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\"; grid.style.gridTemplateColumns = \"repeat(3, 80px)\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, grid, btn);\r\n for (let i = 0; i < 9; i++) {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = \"width:80px;height:80px;font-size:36px;background:rgba(168,85,247,.15);border:1px solid rgba(216,180,254,.15);border-radius:16px;\";\r\n cell.addEventListener(\"click\", () => { if (i === active) { SFX.whack(); score++; info.textContent = `Score: ${score}`; cell.textContent = \"\"; active = -1; } });\r\n grid.appendChild(cell);\r\n }\r\n function spawn() {\r\n if (active >= 0) grid.children[active].textContent = \"\";\r\n active = Math.floor(Math.random() * 9);\r\n grid.children[active].textContent = \"\ud83d\udc39\";\r\n timer = setTimeout(spawn, Math.max(400, 900 - score * 15));\r\n }\r\n btn.addEventListener(\"click\", () => {\r\n if (running) return; running = true; score = 0; info.textContent = \"Score: 0\"; btn.style.display = \"none\";\r\n spawn();\r\n let sec = 30;\r\n gameTimer = setInterval(() => { sec--; if (sec <= 0) { clearInterval(gameTimer); clearTimeout(timer); if (active >= 0) grid.children[active].textContent = \"\"; active = -1; info.textContent = `\u23f1 Time's Up! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; running = false; } }, 1000);\r\n });\r\n return () => { clearTimeout(timer); clearInterval(gameTimer); };\r\n }},\r\n\r\n \/* 5. Quick Math *\/\r\n math: { title: \"\ud83e\uddee Quick Math\", init(area) {\r\n let score = 0, timer, sec = 30, running = false;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Answer as many as you can in 30s\";\r\n const qEl = document.createElement(\"div\"); qEl.style.cssText = \"font-size:32px;font-weight:900;color:#fff;\";\r\n const inp = document.createElement(\"input\"); inp.type = \"number\"; inp.style.cssText = \"width:120px;padding:10px;border-radius:12px;border:1px solid rgba(216,180,254,.3);background:rgba(0,0,0,.3);color:#fff;font-size:20px;text-align:center;outline:none;\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, qEl, inp, btn);\r\n let answer = 0;\r\n function newQ() {\r\n const ops = [\"+\", \"-\", \"\u00d7\"];\r\n const op = ops[Math.floor(Math.random() * 3)];\r\n let a, b;\r\n if (op === \"+\") { a = Math.floor(Math.random() * 50) + 1; b = Math.floor(Math.random() * 50) + 1; answer = a + b; }\r\n else if (op === \"-\") { a = Math.floor(Math.random() * 50) + 10; b = Math.floor(Math.random() * a); answer = a - b; }\r\n else { a = Math.floor(Math.random() * 12) + 1; b = Math.floor(Math.random() * 12) + 1; answer = a * b; }\r\n qEl.textContent = `${a} ${op} ${b} = ?`; inp.value = \"\"; inp.focus();\r\n }\r\n function start() {\r\n score = 0; sec = 30; running = true; btn.style.display = \"none\"; newQ();\r\n timer = setInterval(() => { sec--; info.textContent = `Score: ${score} \u00b7 ${sec}s left`; if (sec <= 0) { clearInterval(timer); running = false; qEl.textContent = \"\"; info.textContent = `\u23f1 Time's Up! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; } }, 1000);\r\n }\r\n inp.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" && running) { if (parseInt(inp.value) === answer) { SFX.success(); score++; info.textContent = `Score: ${score} \u00b7 ${sec}s left`; } else { SFX.fail(); } newQ(); } });\r\n btn.addEventListener(\"click\", start);\r\n return () => { clearInterval(timer); };\r\n }},\r\n\r\n \/* 6. Snake *\/\r\n snake: { title: \"\ud83d\udc0d Snake\", init(area) {\r\n const W = 20, H = 15, S = 22;\r\n const cvs = document.createElement(\"canvas\"); cvs.width = W * S; cvs.height = H * S;\r\n cvs.style.cssText = \"border-radius:12px;border:1px solid rgba(216,180,254,.2);background:#0d071f;\";\r\n const ctx = cvs.getContext(\"2d\");\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Arrow keys\/WASD to control\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, cvs, btn);\r\n let snake, dir, food, score, iv, running = false;\r\n function rand() { return { x: Math.floor(Math.random() * W), y: Math.floor(Math.random() * H) }; }\r\n function draw() {\r\n ctx.fillStyle = \"#0d071f\"; ctx.fillRect(0, 0, cvs.width, cvs.height);\r\n ctx.fillStyle = \"#a855f7\";\r\n snake.forEach(p => { ctx.fillRect(p.x * S + 1, p.y * S + 1, S - 2, S - 2); });\r\n ctx.fillStyle = \"#32f5b7\"; ctx.fillRect(food.x * S + 1, food.y * S + 1, S - 2, S - 2);\r\n }\r\n function tick() {\r\n const h = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };\r\n if (h.x < 0 || h.x >= W || h.y < 0 || h.y >= H || snake.some(p => p.x === h.x && p.y === h.y)) {\r\n clearInterval(iv); running = false; info.textContent = `Game Over! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; return;\r\n }\r\n snake.unshift(h);\r\n if (h.x === food.x && h.y === food.y) { SFX.pop(); score++; info.textContent = `Score: ${score}`; food = rand(); }\r\n else snake.pop();\r\n draw();\r\n }\r\n function start() {\r\n snake = [{ x: 10, y: 7 }]; dir = { x: 1, y: 0 }; food = rand(); score = 0; running = true;\r\n info.textContent = \"Score: 0\"; btn.style.display = \"none\"; draw();\r\n iv = setInterval(tick, 120);\r\n }\r\n function onKey(e) {\r\n const k = e.key.toLowerCase();\r\n if ((k === \"arrowup\" || k === \"w\") && dir.y !== 1) dir = { x: 0, y: -1 };\r\n else if ((k === \"arrowdown\" || k === \"s\") && dir.y !== -1) dir = { x: 0, y: 1 };\r\n else if ((k === \"arrowleft\" || k === \"a\") && dir.x !== 1) dir = { x: -1, y: 0 };\r\n else if ((k === \"arrowright\" || k === \"d\") && dir.x !== -1) dir = { x: 1, y: 0 };\r\n }\r\n document.addEventListener(\"keydown\", onKey);\r\n btn.addEventListener(\"click\", start);\r\n return () => { clearInterval(iv); document.removeEventListener(\"keydown\", onKey); };\r\n }},\r\n\r\n \/* 7. 2048 *\/\r\n puzzle2048: { title: \"\ud83d\udd22 2048\", init(area) {\r\n const N = 4;\r\n let grid2 = Array.from({ length: N }, () => Array(N).fill(0)), score2 = 0;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Arrow keys to slide \u00b7 Score: 0\";\r\n const gEl = document.createElement(\"div\"); gEl.className = \"game-grid-cells\"; gEl.style.gridTemplateColumns = `repeat(4, 64px)`;\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"New Game\";\r\n area.append(info, gEl, btn);\r\n const colors = { 0: \"rgba(255,255,255,.06)\", 2: \"#5b21b6\", 4: \"#6d28d9\", 8: \"#7c3aed\", 16: \"#8b5cf6\", 32: \"#a855f7\", 64: \"#c084fc\", 128: \"#e879f9\", 256: \"#f0abfc\", 512: \"#22d3ee\", 1024: \"#2dd4bf\", 2048: \"#fbbf24\" };\r\n function addTile() {\r\n const empty = [];\r\n grid2.forEach((r, i) => r.forEach((v, j) => { if (!v) empty.push([i, j]); }));\r\n if (!empty.length) return;\r\n const [r, c] = empty[Math.floor(Math.random() * empty.length)];\r\n grid2[r][c] = Math.random() < 0.9 ? 2 : 4;\r\n }\r\n function render2() {\r\n gEl.innerHTML = \"\";\r\n grid2.forEach(row => row.forEach(v => {\r\n const d = document.createElement(\"div\"); d.className = \"game-cell\";\r\n d.style.cssText = `width:64px;height:64px;font-size:${v > 512 ? 14 : 18}px;color:#fff;background:${colors[v] || \"#fbbf24\"};`;\r\n d.textContent = v || \"\"; gEl.appendChild(d);\r\n }));\r\n info.textContent = `Arrow keys \u00b7 Score: ${score2}`;\r\n }\r\n function slide(row) {\r\n let a = row.filter(v => v), pts = 0;\r\n for (let i = 0; i < a.length - 1; i++) { if (a[i] === a[i + 1]) { a[i] *= 2; pts += a[i]; a.splice(i + 1, 1); } }\r\n while (a.length < N) a.push(0);\r\n return { row: a, pts };\r\n }\r\n function move(dir) {\r\n let moved = false, pts = 0;\r\n const g = grid2.map(r => [...r]);\r\n if (dir === \"left\" || dir === \"right\") {\r\n for (let i = 0; i < N; i++) {\r\n let r = dir === \"right\" ? [...grid2[i]].reverse() : [...grid2[i]];\r\n const res = slide(r);\r\n const nr = dir === \"right\" ? res.row.reverse() : res.row;\r\n pts += res.pts;\r\n if (nr.join() !== grid2[i].join()) moved = true;\r\n grid2[i] = nr;\r\n }\r\n } else {\r\n for (let j = 0; j < N; j++) {\r\n let col = grid2.map(r => r[j]);\r\n if (dir === \"down\") col.reverse();\r\n const res = slide(col);\r\n if (dir === \"down\") res.row.reverse();\r\n pts += res.pts;\r\n if (res.row.join() !== grid2.map(r => r[j]).join()) moved = true;\r\n res.row.forEach((v, i) => grid2[i][j] = v);\r\n }\r\n }\r\n if (moved) { score2 += pts; SFX.move(); addTile(); render2(); }\r\n }\r\n function init2() { grid2 = Array.from({ length: N }, () => Array(N).fill(0)); score2 = 0; addTile(); addTile(); render2(); }\r\n function onKey(e) {\r\n const map = { ArrowLeft: \"left\", ArrowRight: \"right\", ArrowUp: \"up\", ArrowDown: \"down\", a: \"left\", d: \"right\", w: \"up\", s: \"down\" };\r\n if (map[e.key]) { e.preventDefault(); move(map[e.key]); }\r\n }\r\n document.addEventListener(\"keydown\", onKey);\r\n btn.addEventListener(\"click\", init2);\r\n init2();\r\n return () => { document.removeEventListener(\"keydown\", onKey); };\r\n }},\r\n\r\n \/* 8. Rock Paper Scissors *\/\r\n rps: { title: \"\u2702\ufe0f Rock Paper Scissors\", init(area) {\r\n let wins = 0, losses = 0, draws = 0;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Pick your move\";\r\n const resultEl = document.createElement(\"div\"); resultEl.style.cssText = \"font-size:48px;min-height:60px;\";\r\n const btns = document.createElement(\"div\"); btns.style.cssText = \"display:flex;gap:14px;\";\r\n const scoreEl = document.createElement(\"div\"); scoreEl.style.cssText = \"color:rgba(255,255,255,.7);font-size:14px;\";\r\n area.append(info, resultEl, btns, scoreEl);\r\n const choices = [{ e: \"\ud83e\udea8\", n: \"Rock\" }, { e: \"\u2702\ufe0f\", n: \"Scissors\" }, { e: \"\ud83d\udcc4\", n: \"Paper\" }];\r\n choices.forEach((ch, i) => {\r\n const b = document.createElement(\"button\"); b.className = \"game-btn\"; b.style.fontSize = \"28px\"; b.textContent = ch.e;\r\n b.addEventListener(\"click\", () => {\r\n const ci = Math.floor(Math.random() * 3);\r\n resultEl.textContent = `${ch.e} vs ${choices[ci].e}`;\r\n if (i === ci) { SFX.click(); draws++; info.textContent = \"Draw!\"; }\r\n else if ((i === 0 && ci === 1) || (i === 1 && ci === 2) || (i === 2 && ci === 0)) { SFX.success(); wins++; info.textContent = \"You Win! \ud83c\udf89\"; }\r\n else { SFX.fail(); losses++; info.textContent = \"You Lose \ud83d\ude22\"; }\r\n scoreEl.textContent = `W ${wins} \u00b7 L ${losses} \u00b7 D ${draws}`;\r\n });\r\n btns.appendChild(b);\r\n });\r\n return () => {};\r\n }},\r\n\r\n \/* 9. Bubble Pop *\/\r\n bubble: { title: \"\ud83e\udee7 Bubble Pop\", init(area) {\r\n const field = document.createElement(\"div\");\r\n field.style.cssText = \"position:relative;width:100%;height:340px;border-radius:18px;background:rgba(0,0,0,.2);overflow:hidden;cursor:crosshair;\";\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Pop bubbles to score \u00b7 30s\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, field, btn);\r\n let score = 0, spawnIv, gameIv, running = false;\r\n function spawn() {\r\n const b = document.createElement(\"div\");\r\n const sz = 30 + Math.random() * 40;\r\n const hue = Math.random() * 360;\r\n b.style.cssText = `position:absolute;width:${sz}px;height:${sz}px;border-radius:999px;background:hsla(${hue},80%,65%,.7);box-shadow:0 0 12px hsla(${hue},80%,65%,.4);left:${Math.random() * 85}%;bottom:-50px;transition:none;cursor:pointer;`;\r\n b.addEventListener(\"click\", (e) => { e.stopPropagation(); SFX.bubble(); score++; info.textContent = `Score: ${score}`; b.remove(); });\r\n field.appendChild(b);\r\n let y = -50;\r\n const rise = () => { y += 2; b.style.bottom = y + \"px\"; if (y > 400) b.remove(); else if (b.parentNode) requestAnimationFrame(rise); };\r\n requestAnimationFrame(rise);\r\n }\r\n function start() {\r\n score = 0; running = true; field.innerHTML = \"\"; btn.style.display = \"none\"; info.textContent = \"Score: 0\";\r\n spawnIv = setInterval(spawn, 500);\r\n let sec = 30;\r\n gameIv = setInterval(() => { sec--; if (sec <= 0) { clearInterval(spawnIv); clearInterval(gameIv); running = false; info.textContent = `\u23f1 Time's Up! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; } }, 1000);\r\n }\r\n btn.addEventListener(\"click\", start);\r\n return () => { clearInterval(spawnIv); clearInterval(gameIv); };\r\n }},\r\n\r\n \/* 10. Typing Race *\/\r\n typing: { title: \"\u2328\ufe0f Typing Race\", init(area) {\r\n const field = document.createElement(\"div\");\r\n field.style.cssText = \"position:relative;width:100%;height:300px;border-radius:18px;background:rgba(0,0,0,.2);overflow:hidden;\";\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Type falling letters to clear \u00b7 45s\";\r\n const inp = document.createElement(\"input\"); inp.style.cssText = \"width:160px;padding:10px;border-radius:12px;border:1px solid rgba(216,180,254,.3);background:rgba(0,0,0,.3);color:#fff;font-size:18px;text-align:center;outline:none;\";\r\n inp.placeholder = \"Type letter...\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, field, inp, btn);\r\n let letters = [], score = 0, missed = 0, spawnIv, gameIv, animFrame, running = false;\r\n function spawn() {\r\n const ch = String.fromCharCode(65 + Math.floor(Math.random() * 26));\r\n const el = document.createElement(\"div\");\r\n el.style.cssText = `position:absolute;top:-30px;left:${10 + Math.random() * 80}%;font-size:24px;font-weight:900;color:#c084fc;text-shadow:0 0 8px rgba(168,85,247,.4);`;\r\n el.textContent = ch; el.dataset.char = ch;\r\n field.appendChild(el);\r\n letters.push({ el, y: -30 });\r\n }\r\n function tick() {\r\n letters.forEach(l => { l.y += 1.2; l.el.style.top = l.y + \"px\"; });\r\n const overflow = letters.filter(l => l.y > 310);\r\n missed += overflow.length;\r\n overflow.forEach(l => l.el.remove());\r\n letters = letters.filter(l => l.y <= 310);\r\n if (running) animFrame = requestAnimationFrame(tick);\r\n }\r\n inp.addEventListener(\"input\", () => {\r\n const v = inp.value.toUpperCase();\r\n if (!v) return;\r\n const idx = letters.findIndex(l => l.el.dataset.char === v);\r\n if (idx >= 0) { SFX.type(); score++; letters[idx].el.remove(); letters.splice(idx, 1); info.textContent = `Score: ${score} \u00b7 Missed: ${missed}`; }\r\n inp.value = \"\";\r\n });\r\n function start() {\r\n letters.forEach(l => l.el.remove()); letters = []; score = 0; missed = 0; running = true;\r\n field.innerHTML = \"\"; btn.style.display = \"none\"; info.textContent = \"Score: 0 \u00b7 Missed: 0\"; inp.focus();\r\n spawnIv = setInterval(spawn, 800);\r\n tick();\r\n let sec = 45;\r\n gameIv = setInterval(() => { sec--; if (sec <= 0) { clearInterval(spawnIv); clearInterval(gameIv); running = false; cancelAnimationFrame(animFrame); info.textContent = `\u23f1 Done! Score: ${score} \u00b7 Missed: ${missed}`; btn.textContent = \"Again\"; btn.style.display = \"\"; } }, 1000);\r\n }\r\n btn.addEventListener(\"click\", start);\r\n return () => { clearInterval(spawnIv); clearInterval(gameIv); cancelAnimationFrame(animFrame); running = false; };\r\n }},\r\n\r\n \/* 11. Bubble Wrap *\/\r\n bubbleWrap: { title: \"\ud83e\udee7 Bubble Wrap\", init(area) {\r\n const ROWS = 8, COLS = 10;\r\n let popped = 0, total = ROWS * COLS;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = `Popped: 0 \/ ${total}`;\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\"; grid.style.gridTemplateColumns = `repeat(${COLS}, 42px)`;\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"New Sheet\";\r\n area.append(info, grid, btn);\r\n function build() {\r\n grid.innerHTML = \"\"; popped = 0; info.textContent = `Popped: 0 \/ ${total}`;\r\n for (let i = 0; i < total; i++) {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = \"width:42px;height:42px;border-radius:999px;background:radial-gradient(circle at 35% 35%,rgba(200,220,255,.45),rgba(120,160,255,.18));border:1.5px solid rgba(180,200,255,.3);font-size:18px;transition:.15s;cursor:pointer;\";\r\n cell.addEventListener(\"click\", () => {\r\n if (cell.dataset.done) return;\r\n SFX.pop(); cell.dataset.done = \"1\"; popped++;\r\n cell.style.background = \"rgba(255,255,255,.04)\"; cell.style.border = \"1.5px solid rgba(255,255,255,.08)\";\r\n cell.style.transform = \"scale(0.85)\"; cell.textContent = \"\";\r\n info.textContent = popped >= total ? `\ud83c\udf89 All popped! ${total} \/ ${total}` : `Popped: ${popped} \/ ${total}`;\r\n });\r\n grid.appendChild(cell);\r\n }\r\n }\r\n btn.addEventListener(\"click\", build);\r\n build();\r\n return () => {};\r\n }},\r\n\r\n \/* 12. Sand Art *\/\r\n sandPaint: { title: \"\ud83c\udfa8 Sand Art\", init(area) {\r\n const cvs = document.createElement(\"canvas\"); cvs.width = 480; cvs.height = 340;\r\n cvs.style.cssText = \"border-radius:16px;background:#1a0e30;cursor:crosshair;touch-action:none;\";\r\n const ctx = cvs.getContext(\"2d\");\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Hold mouse to draw sand art\";\r\n const colorRow = document.createElement(\"div\"); colorRow.style.cssText = \"display:flex;gap:8px;flex-wrap:wrap;justify-content:center;\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Clear Canvas\";\r\n area.append(info, cvs, colorRow, btn);\r\n let drawing = false, hue = 35;\r\n const hues = [35, 15, 50, 0, 200, 120, 280, 45];\r\n const names = [\"Gold\",\"Red\",\"Yellow\",\"Vermillion\",\"Blue\",\"Green\",\"Purple\",\"Earth\"];\r\n hues.forEach((h, i) => {\r\n const b = document.createElement(\"div\");\r\n b.style.cssText = `width:28px;height:28px;border-radius:999px;background:hsl(${h},70%,55%);cursor:pointer;border:2px solid ${i === 0 ? \"#fff\" : \"transparent\"};transition:.15s;`;\r\n b.title = names[i];\r\n b.addEventListener(\"click\", () => { hue = h; colorRow.querySelectorAll(\"div\").forEach(d => d.style.borderColor = \"transparent\"); b.style.borderColor = \"#fff\"; });\r\n colorRow.appendChild(b);\r\n });\r\n function drawSand(x, y) {\r\n for (let i = 0; i < 12; i++) {\r\n const ox = (Math.random() - 0.5) * 20, oy = (Math.random() - 0.5) * 20;\r\n const sz = 1 + Math.random() * 2.5;\r\n const l = 40 + Math.random() * 30;\r\n ctx.fillStyle = `hsl(${hue + (Math.random() - 0.5) * 15},${55 + Math.random() * 20}%,${l}%)`;\r\n ctx.fillRect(x + ox, y + oy, sz, sz);\r\n }\r\n }\r\n function pos(e) { const r = cvs.getBoundingClientRect(); const t = e.touches ? e.touches[0] : e; return { x: (t.clientX - r.left) * (cvs.width \/ r.width), y: (t.clientY - r.top) * (cvs.height \/ r.height) }; }\r\n cvs.addEventListener(\"mousedown\", (e) => { drawing = true; const p = pos(e); drawSand(p.x, p.y); });\r\n cvs.addEventListener(\"mousemove\", (e) => { if (!drawing) return; const p = pos(e); drawSand(p.x, p.y); });\r\n cvs.addEventListener(\"mouseup\", () => drawing = false);\r\n cvs.addEventListener(\"mouseleave\", () => drawing = false);\r\n cvs.addEventListener(\"touchstart\", (e) => { e.preventDefault(); drawing = true; const p = pos(e); drawSand(p.x, p.y); });\r\n cvs.addEventListener(\"touchmove\", (e) => { e.preventDefault(); if (!drawing) return; const p = pos(e); drawSand(p.x, p.y); });\r\n cvs.addEventListener(\"touchend\", () => drawing = false);\r\n btn.addEventListener(\"click\", () => { ctx.clearRect(0, 0, cvs.width, cvs.height); });\r\n return () => {};\r\n }},\r\n\r\n \/* 13. Fruit Slice *\/\r\n fruitSlice: { title: \"\ud83c\udf49 Fruit Slice\", init(area) {\r\n const field = document.createElement(\"div\");\r\n field.style.cssText = \"position:relative;width:100%;height:340px;border-radius:18px;background:rgba(0,0,0,.2);overflow:hidden;cursor:crosshair;\";\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Click fruits to slice \u00b7 30s\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, field, btn);\r\n const fruits = [\"\ud83c\udf4e\",\"\ud83c\udf4a\",\"\ud83c\udf4b\",\"\ud83c\udf47\",\"\ud83c\udf49\",\"\ud83c\udf53\",\"\ud83c\udf51\",\"\ud83e\udd5d\"];\r\n let score = 0, missed = 0, spawnIv, gameIv;\r\n function spawn() {\r\n const el = document.createElement(\"div\");\r\n const f = fruits[Math.floor(Math.random() * fruits.length)];\r\n const startX = 10 + Math.random() * 80;\r\n el.style.cssText = `position:absolute;font-size:38px;left:${startX}%;bottom:0;transition:none;cursor:pointer;user-select:none;z-index:2;`;\r\n el.textContent = f;\r\n let y = 0, vy = -(8 + Math.random() * 5), vx = (Math.random() - 0.5) * 3, x = 0, sliced = false;\r\n el.addEventListener(\"click\", () => {\r\n if (sliced) return; sliced = true; SFX.slice(); score++;\r\n el.style.fontSize = \"16px\"; el.style.opacity = \"0.3\"; el.textContent = \"\ud83d\udca5\";\r\n info.textContent = `Score: ${score} \u00b7 Missed: ${missed}`;\r\n });\r\n field.appendChild(el);\r\n function fly() {\r\n vy += 0.25; y += vy; x += vx;\r\n el.style.bottom = (-y) + \"px\"; el.style.transform = `translateX(${x}px) rotate(${x * 4}deg)`;\r\n if (y > 50) { if (!sliced) missed++; el.remove(); info.textContent = `Score: ${score} \u00b7 Missed: ${missed}`; return; }\r\n requestAnimationFrame(fly);\r\n }\r\n requestAnimationFrame(fly);\r\n }\r\n function start() {\r\n score = 0; missed = 0; field.innerHTML = \"\"; btn.style.display = \"none\"; info.textContent = \"Score: 0 \u00b7 Missed: 0\";\r\n spawnIv = setInterval(spawn, 600);\r\n let sec = 30;\r\n gameIv = setInterval(() => { sec--; if (sec <= 0) { clearInterval(spawnIv); clearInterval(gameIv); info.textContent = `\u23f1 Done! Score: ${score} \u00b7 Missed: ${missed}`; btn.textContent = \"Again\"; btn.style.display = \"\"; } }, 1000);\r\n }\r\n btn.addEventListener(\"click\", start);\r\n return () => { clearInterval(spawnIv); clearInterval(gameIv); };\r\n }},\r\n\r\n \/* 14. Cloud Rain *\/\r\n cloudRain: { title: \"\ud83c\udf27\ufe0f Cloud Rain\", init(area) {\r\n const sky = document.createElement(\"div\");\r\n sky.style.cssText = \"position:relative;width:100%;height:360px;border-radius:18px;background:linear-gradient(180deg,#0b1628 0%,#1a2744 50%,#2a3a5c 100%);overflow:hidden;cursor:pointer;\";\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Click sky to make clouds, click clouds for rain\";\r\n area.append(info, sky);\r\n function makeCloud(cx, cy) {\r\n const cloud = document.createElement(\"div\");\r\n cloud.style.cssText = `position:absolute;left:${cx - 40}px;top:${cy - 20}px;width:80px;height:40px;background:rgba(220,230,245,.85);border-radius:40px;box-shadow:0 8px 30px rgba(0,0,0,.15);cursor:pointer;transition:transform .2s;z-index:3;`;\r\n cloud.addEventListener(\"click\", (e) => {\r\n e.stopPropagation();\r\n cloud.style.transform = \"scale(0.95)\";\r\n SFX.rain();\r\n for (let i = 0; i < 8; i++) {\r\n const drop = document.createElement(\"div\");\r\n const dx = Math.random() * 60 + 10;\r\n drop.style.cssText = `position:absolute;left:${parseFloat(cloud.style.left) + dx}px;top:${parseFloat(cloud.style.top) + 40}px;width:3px;height:12px;border-radius:3px;background:rgba(120,180,255,.7);z-index:1;`;\r\n sky.appendChild(drop);\r\n let dy = 0;\r\n const fall = () => { dy += 2.5; drop.style.top = (parseFloat(cloud.style.top) + 40 + dy) + \"px\"; drop.style.opacity = Math.max(0, 1 - dy \/ 300); if (dy > 340) drop.remove(); else requestAnimationFrame(fall); };\r\n setTimeout(() => requestAnimationFrame(fall), i * 60);\r\n }\r\n setTimeout(() => cloud.style.transform = \"\", 200);\r\n });\r\n sky.appendChild(cloud);\r\n }\r\n sky.addEventListener(\"click\", (e) => {\r\n const r = sky.getBoundingClientRect();\r\n const x = e.clientX - r.left, y = e.clientY - r.top;\r\n if (y < 240) makeCloud(x, Math.min(y, 180));\r\n });\r\n for (let i = 0; i < 3; i++) makeCloud(60 + i * 150, 40 + Math.random() * 60);\r\n return () => {};\r\n }},\r\n\r\n \/* 15. Slide Puzzle *\/\r\n slidePuzzle: { title: \"\ud83e\udde9 Slide Puzzle\", init(area) {\r\n const N = 3;\r\n let board, moves = 0;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Click tiles to move \u00b7 Moves: 0\";\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\"; grid.style.gridTemplateColumns = `repeat(${N}, 72px)`;\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Shuffle\";\r\n area.append(info, grid, btn);\r\n function isSolvable(arr) {\r\n let inv = 0;\r\n for (let i = 0; i < arr.length; i++) for (let j = i + 1; j < arr.length; j++) if (arr[i] && arr[j] && arr[i] > arr[j]) inv++;\r\n return inv % 2 === 0;\r\n }\r\n function init3() {\r\n moves = 0; info.textContent = \"Click tiles to move \u00b7 Moves: 0\";\r\n do { board = [...Array(N * N).keys()].sort(() => Math.random() - 0.5); } while (!isSolvable(board));\r\n render3();\r\n }\r\n function render3() {\r\n grid.innerHTML = \"\";\r\n board.forEach((v, i) => {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = `width:72px;height:72px;font-size:24px;color:#fff;background:${v ? \"rgba(168,85,247,.3)\" : \"rgba(0,0,0,.15)\"};border:1px solid ${v ? \"rgba(216,180,254,.25)\" : \"transparent\"};`;\r\n cell.textContent = v || \"\";\r\n if (v) cell.addEventListener(\"click\", () => tryMove(i));\r\n grid.appendChild(cell);\r\n });\r\n }\r\n function tryMove(idx) {\r\n const empty = board.indexOf(0);\r\n const r1 = Math.floor(idx \/ N), c1 = idx % N, r2 = Math.floor(empty \/ N), c2 = empty % N;\r\n if ((Math.abs(r1 - r2) + Math.abs(c1 - c2)) === 1) {\r\n SFX.move();\r\n [board[idx], board[empty]] = [board[empty], board[idx]];\r\n moves++; info.textContent = `Moves: ${moves}`;\r\n render3();\r\n const win = board.every((v, i) => i === board.length - 1 ? v === 0 : v === i + 1);\r\n if (win) { SFX.success(); info.textContent = `\ud83c\udf89 Solved in ${moves} moves!`; }\r\n }\r\n }\r\n btn.addEventListener(\"click\", init3);\r\n init3();\r\n return () => {};\r\n }},\r\n\r\n \/* 16. Ice Cream Stack *\/\r\n iceCream: { title: \"\ud83c\udf66 Ice Cream Stack\", init(area) {\r\n const cvs = document.createElement(\"canvas\"); cvs.width = 300; cvs.height = 380;\r\n cvs.style.cssText = \"border-radius:16px;background:#1a0e30;\";\r\n const ctx = cvs.getContext(\"2d\");\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Click to place scoop\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, cvs, btn);\r\n const palette = [\"#f472b6\",\"#a78bfa\",\"#34d399\",\"#fbbf24\",\"#60a5fa\",\"#f87171\",\"#2dd4bf\"];\r\n let stack = [], scoopX = 0, scoopDir = 3, scoopColor, running = false, anim;\r\n function newScoop() { scoopX = 0; scoopDir = 3 + stack.length * 0.3; scoopColor = palette[Math.floor(Math.random() * palette.length)]; }\r\n function draw() {\r\n ctx.clearRect(0, 0, 300, 380);\r\n ctx.fillStyle = \"#8B6F47\"; ctx.beginPath(); ctx.moveTo(120, 370); ctx.lineTo(180, 370); ctx.lineTo(160, 310); ctx.lineTo(140, 310); ctx.closePath(); ctx.fill();\r\n stack.forEach((s, i) => {\r\n ctx.fillStyle = s.color; ctx.beginPath(); ctx.arc(s.x, 300 - i * 28, 22, 0, Math.PI * 2); ctx.fill();\r\n ctx.fillStyle = \"rgba(255,255,255,.25)\"; ctx.beginPath(); ctx.arc(s.x - 6, 296 - i * 28, 5, 0, Math.PI * 2); ctx.fill();\r\n });\r\n if (running) {\r\n ctx.fillStyle = scoopColor; ctx.beginPath(); ctx.arc(scoopX, 60, 22, 0, Math.PI * 2); ctx.fill();\r\n ctx.fillStyle = \"rgba(255,255,255,.25)\"; ctx.beginPath(); ctx.arc(scoopX - 6, 56, 5, 0, Math.PI * 2); ctx.fill();\r\n }\r\n }\r\n function tick() {\r\n scoopX += scoopDir;\r\n if (scoopX > 280 || scoopX < 20) scoopDir *= -1;\r\n draw();\r\n if (running) anim = requestAnimationFrame(tick);\r\n }\r\n function drop() {\r\n if (!running) return;\r\n const target = stack.length === 0 ? 150 : stack[stack.length - 1].x;\r\n if (Math.abs(scoopX - target) < 28) {\r\n SFX.place(); stack.push({ x: scoopX, color: scoopColor });\r\n info.textContent = `Layers: ${stack.length}`;\r\n if (stack.length * 28 > 280) { running = false; cancelAnimationFrame(anim); info.textContent = `\ud83c\udf89 Final: ${stack.length} layers!`; btn.textContent = \"Again\"; btn.style.display = \"\"; draw(); return; }\r\n newScoop();\r\n } else {\r\n SFX.fail(); running = false; cancelAnimationFrame(anim);\r\n info.textContent = `Game Over! Stacked ${stack.length} layers`; btn.textContent = \"Again\"; btn.style.display = \"\"; draw();\r\n }\r\n }\r\n cvs.addEventListener(\"click\", drop);\r\n function start() { stack = []; running = true; btn.style.display = \"none\"; newScoop(); tick(); info.textContent = \"Click to place scoop\"; }\r\n btn.addEventListener(\"click\", start);\r\n return () => { running = false; cancelAnimationFrame(anim); };\r\n }},\r\n\r\n \/* 17. Breakout *\/\r\n breakout: { title: \"\ud83c\udfd3 Breakout\", init(area) {\r\n const W = 440, H = 340;\r\n const cvs = document.createElement(\"canvas\"); cvs.width = W; cvs.height = H;\r\n cvs.style.cssText = \"border-radius:12px;background:#0d071f;cursor:none;\";\r\n const ctx = cvs.getContext(\"2d\");\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"Mouse controls paddle\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Start\";\r\n area.append(info, cvs, btn);\r\n let padX = W \/ 2, bx, by, bvx, bvy, bricks, score, running = false, anim;\r\n const PW = 70, PH = 10, BR = 6, COLS = 8, ROWS = 4, BW = (W - 20) \/ COLS, BH = 18;\r\n function initBricks() { bricks = []; for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) bricks.push({ x: 10 + c * BW, y: 30 + r * BH, w: BW - 4, h: BH - 4, alive: true, hue: r * 60 + c * 20 }); }\r\n cvs.addEventListener(\"mousemove\", (e) => { const r = cvs.getBoundingClientRect(); padX = (e.clientX - r.left) * (W \/ r.width); });\r\n function draw() {\r\n ctx.fillStyle = \"#0d071f\"; ctx.fillRect(0, 0, W, H);\r\n ctx.fillStyle = \"#a855f7\"; ctx.fillRect(padX - PW \/ 2, H - 22, PW, PH);\r\n ctx.fillStyle = \"#fff\"; ctx.beginPath(); ctx.arc(bx, by, BR, 0, Math.PI * 2); ctx.fill();\r\n bricks.forEach(b => { if (!b.alive) return; ctx.fillStyle = `hsl(${b.hue},70%,55%)`; ctx.fillRect(b.x, b.y, b.w, b.h); });\r\n }\r\n function tick() {\r\n bx += bvx; by += bvy;\r\n if (bx < BR || bx > W - BR) bvx *= -1;\r\n if (by < BR) bvy *= -1;\r\n if (by > H - 22 - BR && by < H - 12 && bx > padX - PW \/ 2 - BR && bx < padX + PW \/ 2 + BR) { SFX.bounce(); bvy = -Math.abs(bvy); bvx += (bx - padX) * 0.05; }\r\n bricks.forEach(b => { if (!b.alive) return; if (bx > b.x - BR && bx < b.x + b.w + BR && by > b.y - BR && by < b.y + b.h + BR) { b.alive = false; bvy *= -1; score++; SFX.brick(); info.textContent = `Score: ${score}`; } });\r\n if (by > H + 20) { running = false; cancelAnimationFrame(anim); info.textContent = `Game Over! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; draw(); return; }\r\n if (bricks.every(b => !b.alive)) { running = false; cancelAnimationFrame(anim); info.textContent = `\ud83c\udf89 All cleared! Score: ${score}`; btn.textContent = \"Again\"; btn.style.display = \"\"; draw(); return; }\r\n draw(); anim = requestAnimationFrame(tick);\r\n }\r\n function start() {\r\n initBricks(); bx = W \/ 2; by = H - 40; bvx = 3; bvy = -3; score = 0; running = true;\r\n btn.style.display = \"none\"; info.textContent = \"Score: 0\"; anim = requestAnimationFrame(tick);\r\n }\r\n btn.addEventListener(\"click\", start);\r\n return () => { running = false; cancelAnimationFrame(anim); };\r\n }},\r\n\r\n \/* 18. Tic-Tac-Toe *\/\r\n tictactoe: { title: \"\u2b55 Tic-Tac-Toe\", init(area) {\r\n let board, turn, gameOver;\r\n const info = document.createElement(\"div\"); info.className = \"game-score\"; info.textContent = \"You are \u274c \u00b7 First move\";\r\n const grid = document.createElement(\"div\"); grid.className = \"game-grid-cells\"; grid.style.gridTemplateColumns = \"repeat(3, 80px)\";\r\n const btn = document.createElement(\"button\"); btn.className = \"game-btn\"; btn.textContent = \"Restart\";\r\n area.append(info, grid, btn);\r\n const wins = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];\r\n function check(b, p) { return wins.find(w => w.every(i => b[i] === p)); }\r\n function render4() {\r\n grid.innerHTML = \"\";\r\n board.forEach((v, i) => {\r\n const cell = document.createElement(\"div\"); cell.className = \"game-cell\";\r\n cell.style.cssText = \"width:80px;height:80px;font-size:32px;background:rgba(168,85,247,.15);border:1px solid rgba(216,180,254,.2);\";\r\n cell.textContent = v === 1 ? \"\u274c\" : v === 2 ? \"\u2b55\" : \"\";\r\n if (!v && !gameOver) cell.addEventListener(\"click\", () => { SFX.place(); play(i); });\r\n grid.appendChild(cell);\r\n });\r\n }\r\n function aiMove() {\r\n for (const w of wins) { const vals = w.map(i => board[i]); if (vals.filter(v => v === 2).length === 2 && vals.includes(0)) return w[vals.indexOf(0)]; }\r\n for (const w of wins) { const vals = w.map(i => board[i]); if (vals.filter(v => v === 1).length === 2 && vals.includes(0)) return w[vals.indexOf(0)]; }\r\n if (!board[4]) return 4;\r\n const corners = [0, 2, 6, 8].filter(i => !board[i]);\r\n if (corners.length) return corners[Math.floor(Math.random() * corners.length)];\r\n const empty = board.map((v, i) => v ? -1 : i).filter(i => i >= 0);\r\n return empty[Math.floor(Math.random() * empty.length)];\r\n }\r\n function play(i) {\r\n if (board[i] || gameOver) return;\r\n board[i] = 1;\r\n if (check(board, 1)) { gameOver = true; render4(); info.textContent = \"You Win! \ud83c\udf89\"; return; }\r\n if (board.every(v => v)) { gameOver = true; render4(); info.textContent = \"Draw!\"; return; }\r\n const ai = aiMove();\r\n if (ai !== undefined) board[ai] = 2;\r\n if (check(board, 2)) { gameOver = true; render4(); info.textContent = \"AI wins \ud83d\ude22\"; return; }\r\n if (board.every(v => v)) { gameOver = true; render4(); info.textContent = \"Draw!\"; return; }\r\n render4();\r\n }\r\n function init4() { board = Array(9).fill(0); turn = 1; gameOver = false; info.textContent = \"You are \u274c \u00b7 First move\"; render4(); }\r\n btn.addEventListener(\"click\", init4);\r\n init4();\r\n return () => {};\r\n }}\r\n };\r\n\r\n function initMiniGames() {\r\n document.querySelectorAll(\".game-card\").forEach(card => {\r\n card.addEventListener(\"click\", () => openGameModal(card.dataset.game));\r\n });\r\n document.getElementById(\"gameModalClose\").addEventListener(\"click\", closeGameModal);\r\n document.getElementById(\"gameModalOverlay\").addEventListener(\"click\", (e) => {\r\n if (e.target === e.currentTarget) closeGameModal();\r\n });\r\n document.addEventListener(\"keydown\", (e) => {\r\n if (e.key === \"Escape\") closeGameModal();\r\n });\r\n }\r\n\r\n function initTopAds() {\r\n const banner = document.getElementById(\"topAdBanner\");\r\n if (!banner) return;\r\n \/\/ Grouped by platform - easy to add more platforms\/items later\r\n const platforms = [\r\n {\r\n type: \"iframe\",\r\n ads: [\r\n { src:\"https:\/\/bysevepoin.com\/e\/b8ssb5bitnbv\/1-30-17\", link:\"https:\/\/vids.st\/v\/69805\", title:\"1.30.17\" },\r\n { src:\"https:\/\/bysevepoin.com\/e\/stov26j0qhv8\/no2\", link:\"https:\/\/vids.st\/v\/79446\", title:\"NO2\" },\r\n { src:\"https:\/\/bysevepoin.com\/e\/0nyjhp48ytxy\/no3\", link:\"https:\/\/vids.st\/v\/71472\", title:\"NO3\" },\r\n { src:\"https:\/\/bysevepoin.com\/e\/vc9odizyabjv\/no4\", link:\"https:\/\/vids.st\/v\/79445\", title:\"NO4\" }\r\n ]\r\n },\r\n {\r\n type: \"iframe\",\r\n ads: [\r\n { src:\"https:\/\/logiflix.net\/e\/z52qs1f83vahg\", link:\"https:\/\/logiflix.net\/d\/y0b9khtjum09\", title:\"1.30.17\" },\r\n { src:\"https:\/\/logiflix.net\/e\/m0krvh40psozc\", link:\"https:\/\/logiflix.net\/d\/x7e18c1og7r1\", title:\"NO2\" },\r\n { src:\"https:\/\/logiflix.net\/e\/xz3owxh9tzx7w\", link:\"https:\/\/logiflix.net\/d\/qi4gfa2crgww\", title:\"NO3\" },\r\n { src:\"https:\/\/logiflix.net\/e\/4a6268111wtqh\", link:\"https:\/\/logiflix.net\/d\/ui1ao2dfb8d7\", title:\"NO4\" }\r\n ]\r\n },\r\n {\r\n type: \"img\",\r\n ads: [\r\n { src:\"https:\/\/img-place.com\/b8ssb5bitnbv_t.jpg\", link:\"https:\/\/bysevepoin.com\/d\/b8ssb5bitnbv\/1-30-17\", title:\"1.30.17\" },\r\n { src:\"https:\/\/img-place.com\/stov26j0qhv8_t.jpg\", link:\"https:\/\/bysevepoin.com\/d\/stov26j0qhv8\/no2\", title:\"NO2\" },\r\n { src:\"https:\/\/img-place.com\/0nyjhp48ytxy_t.jpg\", link:\"https:\/\/bysevepoin.com\/d\/0nyjhp48ytxy\/no3\", title:\"NO3\" },\r\n { src:\"https:\/\/img-place.com\/vc9odizyabjv_t.jpg\", link:\"https:\/\/bysevepoin.com\/d\/vc9odizyabjv\/no4\", title:\"NO4\" }\r\n ]\r\n }\r\n ];\r\n \/\/ Randomly pick one platform\r\n const p = platforms[Math.floor(Math.random() * platforms.length)];\r\n p.ads.forEach(ad => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"ad-card\";\r\n if (p.type === \"img\") {\r\n card.innerHTML = `<img decoding=\"async\" src=\"${ad.src}\" alt=\"${ad.title}\" loading=\"lazy\"><div class=\"ad-card-overlay\"><span>${ad.title}<\/span><\/div>`;\r\n } else {\r\n card.innerHTML = `<iframe src=\"${ad.src}\" scrolling=\"no\" allowfullscreen loading=\"lazy\"><\/iframe><div class=\"ad-card-overlay\"><span>${ad.title}<\/span><\/div>`;\r\n }\r\n card.addEventListener(\"click\", () => window.open(ad.link, \"_blank\"));\r\n banner.appendChild(card);\r\n });\r\n }\r\n\r\n function initCatCarousel() {\r\n const grid = document.getElementById(\"catGrid\");\r\n const leftBtn = document.getElementById(\"catArrowLeft\");\r\n const rightBtn = document.getElementById(\"catArrowRight\");\r\n if (!grid || !leftBtn || !rightBtn) return;\r\n\r\n const scrollAmt = 250;\r\n leftBtn.addEventListener(\"click\", () => { grid.scrollBy({ left: -scrollAmt, behavior: \"smooth\" }); });\r\n rightBtn.addEventListener(\"click\", () => { grid.scrollBy({ left: scrollAmt, behavior: \"smooth\" }); });\r\n\r\n \/\/ Auto-scroll: move one card left every 3 seconds\r\n let autoTimer = setInterval(() => {\r\n if (grid.scrollLeft + grid.clientWidth >= grid.scrollWidth - 10) {\r\n grid.scrollTo({ left: 0, behavior: \"smooth\" });\r\n } else {\r\n grid.scrollBy({ left: scrollAmt, behavior: \"smooth\" });\r\n }\r\n }, 3000);\r\n\r\n \/\/ Pause auto-scroll on hover\r\n grid.addEventListener(\"mouseenter\", () => clearInterval(autoTimer));\r\n grid.addEventListener(\"mouseleave\", () => {\r\n autoTimer = setInterval(() => {\r\n if (grid.scrollLeft + grid.clientWidth >= grid.scrollWidth - 10) {\r\n grid.scrollTo({ left: 0, behavior: \"smooth\" });\r\n } else {\r\n grid.scrollBy({ left: scrollAmt, behavior: \"smooth\" });\r\n }\r\n }, 3000);\r\n });\r\n }\r\n\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n initTopAds();\r\n initCatCarousel();\r\n initParticleField();\r\n initHeroVideoRotation();\r\n initHeroSound();\r\n animateStats();\r\n initM3u8Player();\r\n initNewsletter();\r\n initBackToTop();\r\n initMiniGames();\r\n });\r\n\r\n window.addEventListener(\"resize\", () => {\r\n clearTimeout(window.__particleResizeTimer);\r\n window.__particleResizeTimer = setTimeout(initParticleField, 250);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-55567f0 e-flex e-con-boxed e-con e-parent\" data-id=\"55567f0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Relaxation Station \u00b7 Free M3U8 Player AD \ud83c\udf3f  24\/7 R […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template\/home-page.php","meta":{"footnotes":""},"class_list":["post-212","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/pages\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":78,"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/pages\/212\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/pages\/212\/revisions\/540"}],"wp:attachment":[{"href":"https:\/\/luckysheep.cc\/index.php\/wp-json\/wp\/v2\/media?parent=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}