NRRU Green Library - AR Waste Sorting Game<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/camera_utils\/camera_utils.js\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/hands\/hands.js\" crossorigin=\"anonymous\"><\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Kanit', sans-serif;\n background-color: #0f172a;\n overflow: hidden;\n user-select: none;\n -webkit-user-select: none;\n }\n \/* Glassmorphism Classes *\/\n .glass-panel {\n background: rgba(15, 23, 42, 0.45);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);\n }\n .glass-panel-dark {\n background: rgba(15, 23, 42, 0.7);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n }\n \/* Hide default video element but keep it for MediaPipe rendering *\/\n #webcam {\n transform: scaleX(-1);\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body class=\"relative w-screen h-screen flex items-center justify-center text-white\">\n\n <script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n \n function playSound(type) {\n if (audioCtx.state === 'suspended') {\n audioCtx.resume();\n }\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.connect(gain);\n gain.connect(audioCtx.destination);\n\n if (type === 'click') {\n osc.type = 'sine';\n osc.frequency.setValueAtTime(600, audioCtx.currentTime);\n osc.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.1);\n gain.gain.setValueAtTime(0.12, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.1);\n } else if (type === 'grab') {\n osc.type = 'triangle';\n osc.frequency.setValueAtTime(320, audioCtx.currentTime);\n osc.frequency.setValueAtTime(460, audioCtx.currentTime + 0.05);\n gain.gain.setValueAtTime(0.18, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.15);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.15);\n } else if (type === 'correct') {\n osc.type = 'sine';\n osc.frequency.setValueAtTime(523.25, audioCtx.currentTime); \/\/ C5\n osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.08); \/\/ E5\n osc.frequency.setValueAtTime(783.99, audioCtx.currentTime + 0.16); \/\/ G5\n osc.frequency.setValueAtTime(1046.50, audioCtx.currentTime + 0.24); \/\/ C6\n gain.gain.setValueAtTime(0.15, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.45);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.45);\n } else if (type === 'wrong') {\n osc.type = 'sawtooth';\n osc.frequency.setValueAtTime(220, audioCtx.currentTime); \/\/ A3\n osc.frequency.setValueAtTime(138, audioCtx.currentTime + 0.12); \/\/ C#3\n gain.gain.setValueAtTime(0.2, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.38);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.38);\n }\n }\n <\/script>\n\n \n <video id=\"webcam\" autoplay playsinline><\/video>\n\n \n <canvas id=\"gameCanvas\" class=\"absolute inset-0 w-full h-full object-cover z-10 touch-none\"><\/canvas>\n\n \n <div id=\"uiContainer\" class=\"absolute inset-0 z-20 pointer-events-none flex flex-col justify-between p-4 md:p-6\">\n \n \n <header id=\"gameHeader\" class=\"w-full flex justify-between items-center opacity-0 transition-opacity duration-500\">\n <div class=\"glass-panel rounded-2xl px-5 py-3 flex items-center gap-6 pointer-events-auto\">\n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase\">\u0e04\u0e30\u0e41\u0e19\u0e19<\/span>\n <span id=\"scoreDisplay\" class=\"text-3xl font-extrabold text-green-300 drop-shadow-md\">0<\/span>\n <\/div>\n <div class=\"h-8 w-[1px] bg-white\/20\"><\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase\">\u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32<\/span>\n <span id=\"progressDisplay\" class=\"text-lg font-bold\">1 \/ 10<\/span>\n <\/div>\n <div class=\"h-8 w-[1px] bg-white\/20\"><\/div>\n \n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase mb-0.5\">\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14<\/span>\n <select id=\"sceneSelector\" class=\"bg-slate-900\/80 text-white border border-white\/20 rounded-xl px-2.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-green-400 pointer-events-auto cursor-pointer font-medium\">\n <option value=\"0\">\ud83d\udcda \u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30<\/option>\n <option value=\"1\">\ud83d\udecb\ufe0f \u0e21\u0e38\u0e21\u0e42\u0e0b\u0e1f\u0e32\u0e19\u0e31\u0e48\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01<\/option>\n <option value=\"2\">\ud83d\udcbb \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 IT<\/option>\n <option value=\"3\">\ud83c\udfe2 \u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e01\u0e23\u0e35\u0e19\u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex gap-3 pointer-events-auto\">\n <button id=\"btnToggleCamera\" class=\"glass-panel hover:bg-green-600\/30 active:scale-95 transition px-4 py-2 rounded-xl flex items-center gap-2 text-sm font-medium\">\n <span id=\"cameraStatusIcon\">\ud83d\udd34<\/span>\n <span id=\"cameraStatusText\">\u0e42\u0e2b\u0e25\u0e14 AR...<\/span>\n <\/button>\n <button id=\"btnRestart\" class=\"glass-panel hover:bg-red-600\/30 active:scale-95 transition px-4 py-2 rounded-xl text-sm font-medium\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"inGameMascotContainer\" class=\"absolute top-[45%] left-4 md:left-8 -translate-y-1\/2 opacity-0 transition-opacity duration-500 pointer-events-none flex flex-col items-start z-10\">\n \n <div id=\"mascotBubble\" class=\"bg-white text-[#00205B] border-[#FBBF24] border-2 text-xs md:text-sm font-bold px-4 py-2 rounded-2xl rounded-bl-none shadow-lg mb-2 opacity-0 transition-all duration-300 transform translate-y-2 max-w-[150px] whitespace-pre-wrap leading-tight\">\n \u0e0a\u0e48\u0e27\u0e22\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e19\u0e30!\n <\/div>\n \n <div class=\"w-[80px] md:w-[100px] animate-[bounce_4s_infinite]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-full drop-shadow-[0_8px_10px_rgba(0,0,0,0.5)] origin-bottom\">\n \n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"30\" cy=\"110\" r=\"12\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <rect x=\"75\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"110\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <path d=\"M 65 230 Q 80 220 95 230 L 90 240 L 65 240 Z\" fill=\"#00205B\"\/>\n <path d=\"M 105 230 Q 120 220 135 230 L 135 240 L 110 240 Z\" fill=\"#00205B\"\/>\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n \n <circle cx=\"100\" cy=\"165\" r=\"16\" fill=\"#FBBF24\"\/>\n <circle cx=\"100\" cy=\"165\" r=\"12\" fill=\"#00205B\"\/>\n <text x=\"100\" y=\"172\" fill=\"#FFFFFF\" font-family=\"Arial, sans-serif\" font-weight=\"900\" font-size=\"18\" text-anchor=\"middle\">N<\/text>\n <rect x=\"70\" y=\"185\" width=\"60\" height=\"12\" rx=\"3\" fill=\"#00205B\"\/>\n <rect x=\"75\" y=\"187\" width=\"50\" height=\"2\" fill=\"#FFFFFF\" opacity=\"0.6\"\/>\n <rect x=\"80\" y=\"191\" width=\"40\" height=\"2\" fill=\"#FBBF24\" opacity=\"0.8\"\/>\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlowInGame)\" opacity=\"0.5\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"70\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlowInGame)\" opacity=\"0.5\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"120\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 90 105 Q 100 118 110 105\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n \n <defs>\n <radialGradient id=\"pinkGlowInGame\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stop-color=\"#EC297B\"\/>\n <stop offset=\"100%\" stop-color=\"#00E5FF\" stop-opacity=\"0\"\/>\n <\/radialGradient>\n <\/defs>\n <\/svg>\n <\/div>\n <\/div>\n\n \n <footer id=\"gameFooter\" class=\"w-full flex justify-center opacity-0 transition-opacity duration-500\">\n <div id=\"arStatusIndicator\" class=\"glass-panel-dark text-white\/90 text-sm px-6 py-2.5 rounded-full flex items-center gap-2 border border-white\/10 animate-pulse\">\n <span class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/span>\n <span id=\"arStatusText\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07...<\/span>\n <\/div>\n <\/footer>\n <\/div>\n\n \n <div id=\"welcomeScreen\" class=\"absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/80 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-lg w-full rounded-3xl p-8 text-center flex flex-col items-center border border-white\/20 shadow-2xl\">\n \n <div class=\"mb-8 flex items-center justify-center gap-4 w-full max-w-[380px] drop-shadow-[0_0_20px_rgba(255,255,255,0.45)]\">\n \n <svg class=\"w-[75px] h-[75px] shrink-0\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M 12 28 L 12 83 Q 27 93 42 83 L 42 28 Q 27 38 12 28 Z\" fill=\"#FBBF24\"\/>\n \n <path d=\"M 18 20 L 18 75 Q 33 85 48 75 L 48 20 Q 33 30 18 20 Z\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 88 28 L 88 83 Q 73 93 58 83 L 58 28 Q 73 38 88 28 Z\" fill=\"#10B981\"\/>\n \n <path d=\"M 82 20 L 82 75 Q 67 85 52 75 L 52 20 Q 67 30 82 20 Z\" fill=\"#EC297B\"\/>\n <\/svg>\n \n <div class=\"flex flex-col justify-center text-left font-sans mt-1\">\n <span class=\"text-[44px] leading-[0.85] font-black text-white tracking-[-0.03em]\">NRRU<\/span>\n <span class=\"text-[32px] leading-[0.95] font-extrabold text-[#EC297B] tracking-[-0.01em] mt-1\">LIBRARY<\/span>\n <\/div>\n <\/div>\n \n <h2 class=\"text-xl text-green-300 font-extrabold tracking-wide mb-1\">\n AR Waste Sorting Game\n <\/h2>\n <h3 class=\"text-sm text-emerald-100\/90 font-medium tracking-wide mb-6\">\n \u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01 \u0e0a\u0e48\u0e27\u0e22\u0e23\u0e31\u0e01\u0e29\u0e32\u0e42\u0e25\u0e01\u0e19\u0e35\u0e49\u0e44\u0e27\u0e49\u0e44\u0e14\u0e49\n <\/h3>\n \n \n <div class=\"flex flex-row items-center gap-4 mb-8 bg-white\/5 rounded-2xl p-4 border border-white\/10 relative w-full max-w-[400px]\">\n \n <div class=\"shrink-0 animate-[bounce_3s_infinite]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-[90px] drop-shadow-[0_8px_10px_rgba(0,0,0,0.5)] origin-bottom\">\n \n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"30\" cy=\"110\" r=\"12\" fill=\"#FFFFFF\"\/>\n\n \n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n\n \n <rect x=\"75\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"110\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <path d=\"M 65 230 Q 80 220 95 230 L 90 240 L 65 240 Z\" fill=\"#00205B\"\/>\n <path d=\"M 105 230 Q 120 220 135 230 L 135 240 L 110 240 Z\" fill=\"#00205B\"\/>\n\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n \n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n\n \n <circle cx=\"100\" cy=\"165\" r=\"16\" fill=\"#FBBF24\"\/>\n <circle cx=\"100\" cy=\"165\" r=\"12\" fill=\"#00205B\"\/>\n <text x=\"100\" y=\"172\" fill=\"#FFFFFF\" font-family=\"Arial, sans-serif\" font-weight=\"900\" font-size=\"18\" text-anchor=\"middle\">N<\/text>\n \n \n <rect x=\"70\" y=\"185\" width=\"60\" height=\"12\" rx=\"3\" fill=\"#00205B\"\/>\n <rect x=\"75\" y=\"187\" width=\"50\" height=\"2\" fill=\"#FFFFFF\" opacity=\"0.6\"\/>\n <rect x=\"80\" y=\"191\" width=\"40\" height=\"2\" fill=\"#FBBF24\" opacity=\"0.8\"\/>\n\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n \n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n \n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlow)\" opacity=\"0.5\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"70\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlow)\" opacity=\"0.5\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"120\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n\n \n <path d=\"M 90 105 Q 100 118 110 105\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n\n \n <defs>\n <radialGradient id=\"pinkGlow\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stop-color=\"#EC297B\"\/>\n <stop offset=\"100%\" stop-color=\"#00E5FF\" stop-opacity=\"0\"\/>\n <\/radialGradient>\n <\/defs>\n <\/svg>\n <\/div>\n \n <div class=\"text-left flex-1\">\n <h3 class=\"text-green-300 font-bold mb-1 text-sm flex items-center gap-1.5\">\n <span class=\"text-yellow-400 text-base\">\u2728<\/span> \u0e19\u0e49\u0e2d\u0e07\u0e1a\u0e38\u0e4a\u0e04\u0e1a\u0e2d\u0e17 (BookBot)\n <\/h3>\n <p class=\"text-slate-200 text-xs leading-relaxed\">\n \u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35\u0e04\u0e23\u0e31\u0e1a! \u0e21\u0e32\u0e23\u0e48\u0e27\u0e21\u0e2a\u0e19\u0e38\u0e01\u0e01\u0e31\u0e1a\u0e27\u0e34\u0e18\u0e35\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2a\u0e39\u0e48\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\u0e14\u0e49\u0e27\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 <strong>AR Hand Tracking<\/strong> \u0e0a\u0e39\u0e21\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e49\u0e27\u0e21\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a!\n <\/p>\n <\/div>\n <\/div>\n\n <button id=\"btnEnterGame\" class=\"w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-95 transition-transform duration-200 py-4 px-6 rounded-2xl font-bold text-lg shadow-lg shadow-green-500\/20 pointer-events-auto\">\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e40\u0e01\u0e21\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"instructionsScreen\" class=\"hidden absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/80 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-xl w-full rounded-3xl p-8 text-center border border-white\/20 shadow-2xl\">\n <h2 class=\"text-2xl font-bold mb-6 text-green-300\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01<\/h2>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-8\">\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc4b<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e0a\u0e39\u0e21\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e2b\u0e31\u0e19\u0e1d\u0e48\u0e32\u0e21\u0e37\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e2b\u0e32\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49 AI \u0e15\u0e23\u0e27\u0e08\u0e08\u0e31\u0e1a\u0e44\u0e14\u0e49\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc46<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e1b\u0e25\u0e32\u0e22\u0e19\u0e34\u0e49\u0e27\u0e0a\u0e35\u0e49\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e04\u0e37\u0e2d\u0e15\u0e31\u0e27\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e22\u0e30\u0e1a\u0e19\u0e08\u0e2d<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc4c<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e08\u0e35\u0e1a\u0e19\u0e34\u0e49\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e35\u0e1a<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e43\u0e0a\u0e49\u0e19\u0e34\u0e49\u0e27\u0e42\u0e1b\u0e49\u0e07\u0e41\u0e25\u0e30\u0e19\u0e34\u0e49\u0e27\u0e0a\u0e35\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e1a\u0e01\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e22\u0e34\u0e1a\u0e08\u0e31\u0e1a\u0e27\u0e31\u0e15\u0e16\u0e38\u0e02\u0e22\u0e30<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83e\udd1a<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e01\u0e32\u0e07\u0e19\u0e34\u0e49\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e25\u0e48\u0e2d\u0e22<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e21\u0e37\u0e2d\u0e2d\u0e2d\u0e01\u0e2b\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e22\u0e19\u0e02\u0e22\u0e30\u0e25\u0e07\u0e16\u0e31\u0e07\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-500\/10 border border-amber-500\/20 rounded-xl p-3 mb-6 text-xs text-amber-300 flex items-center gap-2 justify-center\">\n <span>\u2139\ufe0f<\/span>\n <span>\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 <strong>\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19<\/strong> \u0e25\u0e32\u0e01\u0e42\u0e22\u0e19\u0e02\u0e22\u0e30\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35!<\/span>\n <\/div>\n\n <button id=\"btnStartGame\" class=\"w-full bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 active:scale-95 transition py-4 px-6 rounded-2xl font-bold text-lg shadow-lg pointer-events-auto\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e40\u0e25\u0e22!\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"gameOverScreen\" class=\"hidden absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/90 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-md w-full rounded-3xl p-8 text-center border border-white\/20 shadow-2xl pointer-events-auto\">\n <span class=\"text-5xl mb-4 block animate-bounce\">\ud83c\udfc6<\/span>\n <h2 class=\"text-3xl font-extrabold text-green-300 mb-1\">\u0e2a\u0e23\u0e38\u0e1b\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/h2>\n <p class=\"text-emerald-100\/70 text-sm mb-6\">\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e23\u0e31\u0e01\u0e29\u0e32\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27 NRRU \u0e44\u0e14\u0e49\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!<\/p>\n\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-5 mb-6 space-y-3 text-left\">\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e30\u0e2a\u0e21\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14<\/span>\n <span id=\"finalScore\" class=\"text-xl font-bold text-green-400\">0<\/span>\n <\/div>\n <div class=\"h-[1px] bg-white\/10\"><\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e15\u0e2d\u0e1a\u0e16\u0e39\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n <span id=\"finalCorrect\" class=\"font-semibold text-emerald-300\">0 \/ 10<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e15\u0e2d\u0e1a\u0e1c\u0e34\u0e14<\/span>\n <span id=\"finalWrong\" class=\"font-semibold text-red-300\">0<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e40\u0e1b\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e47\u0e19\u0e15\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33<\/span>\n <span id=\"finalAccuracy\" class=\"font-semibold text-yellow-300\">0%<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"btnPlayAgain\" class=\"w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-95 transition py-4 px-6 rounded-2xl font-bold text-lg shadow-lg pointer-events-auto\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e25\u0e48\u0e19\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"explanationModal\" class=\"hidden absolute inset-0 z-30 flex items-center justify-center bg-slate-950\/85 p-6 pointer-events-auto transition-opacity duration-300\">\n <div class=\"glass-panel max-w-md w-full rounded-3xl p-6 pt-12 text-center border border-red-500\/30 shadow-2xl flex flex-col items-center relative mt-10\">\n \n \n <div class=\"absolute -top-16 left-1\/2 -translate-x-1\/2 w-[100px]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-full drop-shadow-[0_8px_10px_rgba(0,0,0,0.4)]\">\n \n <path d=\"M 140 160 Q 170 170 140 210\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 140 210\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n \n <circle cx=\"100\" cy=\"110\" r=\"5\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n\n <h3 class=\"text-2xl font-bold text-red-400 mb-1\">\u0e22\u0e31\u0e07\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e19\u0e30!<\/h3>\n <p class=\"text-slate-300 text-xs mb-3\">\u0e19\u0e49\u0e2d\u0e07\u0e1a\u0e38\u0e4a\u0e04\u0e1a\u0e2d\u0e17\u0e2d\u0e22\u0e32\u0e01\u0e41\u0e19\u0e30\u0e19\u0e33\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e02\u0e2d\u0e07\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n \n \n <div class=\"flex items-center gap-4 bg-white\/5 border border-white\/10 rounded-2xl px-5 py-3 my-2 w-full justify-center\">\n <canvas id=\"modalTrashCanvas\" width=\"90\" height=\"90\" class=\"drop-shadow-md bg-white\/5 rounded-full\"><\/canvas>\n <div class=\"text-left\">\n <div id=\"expTrashName\" class=\"font-extrabold text-xl text-white\">\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01<\/div>\n <div class=\"text-sm text-slate-300 mt-0.5\">\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07: <span id=\"expCorrectBin\" class=\"font-bold\">\u0e02\u0e22\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25<\/span><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-slate-900\/60 border border-white\/5 rounded-2xl p-4 my-3 text-sm text-slate-300 text-left leading-relaxed w-full shadow-inner\">\n <p class=\"font-semibold text-green-300 mb-1.5 flex items-center gap-1.5\">\n <span>\ud83c\udf31<\/span> \u0e40\u0e01\u0e23\u0e47\u0e14\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01:\n <\/p>\n <p id=\"expDetail\" class=\"text-slate-200\">\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e19\u0e35\u0e49\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48...<\/p>\n <\/div>\n \n <button id=\"btnDismissExplanation\" class=\"w-full mt-2 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-emerald-700 active:scale-95 transition-transform duration-200 py-3.5 px-6 rounded-2xl font-bold text-md shadow-lg shadow-green-500\/25 pointer-events-auto\">\n \u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e02\u0e49\u0e2d\u0e16\u0e31\u0e14\u0e44\u0e1b \ud83d\ude80\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e02\u0e22\u0e30 16 \u0e0a\u0e34\u0e49\u0e19 \n const TRASH_ITEMS = [\n { id: 1, name: \"\u0e02\u0e27\u0e14\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\", emoji: \"\ud83d\udca7\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e17\u0e33\u0e21\u0e32\u0e08\u0e32\u0e01\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01 PET \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e43\u0e2a \u0e41\u0e02\u0e47\u0e07\u0e41\u0e23\u0e07\u0e41\u0e25\u0e30\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19\u0e2a\u0e39\u0e07 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e2b\u0e25\u0e2d\u0e21\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e21\u0e47\u0e14\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e22\u0e2a\u0e31\u0e07\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c \u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e14\u0e37\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e44\u0e21\u0e48\u0e08\u0e33\u0e01\u0e31\u0e14\u0e23\u0e2d\u0e1a\" },\n { id: 2, name: \"\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e25\u0e31\u0e07\", emoji: \"\ud83d\udce6\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e17\u0e35\u0e48\u0e17\u0e33\u0e21\u0e32\u0e08\u0e32\u0e01\u0e40\u0e22\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e49\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e21\u0e35\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e22\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e17\u0e35\u0e48\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e21\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e34\u0e48\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e31\u0e48\u0e19\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e22\u0e37\u0e48\u0e2d\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e25\u0e39\u0e01\u0e1f\u0e39\u0e01\u0e41\u0e25\u0e30\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e40\u0e02\u0e35\u0e22\u0e19\u0e43\u0e2b\u0e21\u0e48\" },\n { id: 3, name: \"\u0e40\u0e28\u0e29\u0e2d\u0e32\u0e2b\u0e32\u0e23\", emoji: \"\ud83c\udf72\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e37\u0e49\u0e19\u0e2a\u0e39\u0e07\u0e41\u0e25\u0e30\u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e2b\u0e32\u0e01\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e02\u0e22\u0e30\u0e41\u0e2b\u0e49\u0e07 \u0e08\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e17\u0e33\u0e1b\u0e38\u0e4b\u0e22\u0e2b\u0e21\u0e31\u0e01 \u0e19\u0e49\u0e33\u0e2b\u0e21\u0e31\u0e01\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e \u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e4a\u0e32\u0e0b\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e34\u0e15\u0e23\u0e15\u0e48\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e44\u0e14\u0e49\u0e14\u0e35\" },\n { id: 4, name: \"\u0e40\u0e1b\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e25\u0e49\u0e27\u0e22\", emoji: \"\ud83c\udf4c\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e2a\u0e32\u0e23\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c \u0e41\u0e23\u0e48\u0e18\u0e32\u0e15\u0e38\u0e42\u0e1e\u0e41\u0e17\u0e2a\u0e40\u0e0b\u0e35\u0e22\u0e21 \u0e41\u0e25\u0e30\u0e1f\u0e2d\u0e2a\u0e1f\u0e2d\u0e23\u0e31\u0e2a\u0e2a\u0e39\u0e07\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e44\u0e14\u0e49\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e44\u0e1b\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e38\u0e4b\u0e22\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e23\u0e32\u0e01\u0e41\u0e25\u0e30\u0e1e\u0e37\u0e0a\u0e1c\u0e31\u0e01\u0e2a\u0e27\u0e19\u0e04\u0e23\u0e31\u0e27\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e40\u0e04\u0e21\u0e35\" },\n { id: 5, name: \"\u0e2b\u0e25\u0e2d\u0e14\u0e44\u0e1f\u0e40\u0e01\u0e48\u0e32\", emoji: \"\ud83d\udca1\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2b\u0e25\u0e2d\u0e14\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e02\u0e2d\u0e07\u0e44\u0e2d\u0e1b\u0e23\u0e2d\u0e17\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e40\u0e23\u0e37\u0e2d\u0e07\u0e41\u0e2a\u0e07\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29\u0e23\u0e49\u0e32\u0e22\u0e41\u0e23\u0e07 \u0e2b\u0e32\u0e01\u0e41\u0e15\u0e01\u0e2b\u0e31\u0e01\u0e08\u0e30\u0e1b\u0e19\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e2a\u0e39\u0e48\u0e2d\u0e32\u0e01\u0e32\u0e28\u0e41\u0e25\u0e30\u0e1c\u0e34\u0e27\u0e2b\u0e19\u0e31\u0e07 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e43\u0e2a\u0e48\u0e16\u0e31\u0e07\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1d\u0e31\u0e07\u0e01\u0e25\u0e1a\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e33\u0e08\u0e31\u0e14\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\" },\n { id: 6, name: \"\u0e16\u0e48\u0e32\u0e19\u0e44\u0e1f\u0e09\u0e32\u0e22\", emoji: \"\ud83d\udd0b\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e21\u0e35\u0e2a\u0e32\u0e23\u0e42\u0e25\u0e2b\u0e30\u0e2b\u0e19\u0e31\u0e01\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29\u0e2a\u0e39\u0e07\u0e2a\u0e30\u0e2a\u0e21\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e40\u0e0a\u0e48\u0e19 \u0e41\u0e04\u0e14\u0e40\u0e21\u0e35\u0e22\u0e21 \u0e15\u0e30\u0e01\u0e31\u0e48\u0e27 \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e2d\u0e17 \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e17\u0e34\u0e49\u0e07\u0e1b\u0e19\u0e01\u0e31\u0e1a\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e41\u0e25\u0e30\u0e40\u0e01\u0e34\u0e14\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e38\u0e14 \u0e2a\u0e32\u0e23\u0e1e\u0e34\u0e29\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e08\u0e30\u0e23\u0e31\u0e48\u0e27\u0e0b\u0e36\u0e21\u0e25\u0e07\u0e2a\u0e39\u0e48\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e19\u0e49\u0e33\u0e43\u0e15\u0e49\u0e14\u0e34\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e48\u0e27\u0e07\u0e42\u0e0b\u0e48\u0e2d\u0e32\u0e2b\u0e32\u0e23\" },\n { id: 7, name: \"\u0e0b\u0e2d\u0e07\u0e02\u0e19\u0e21\", emoji: \"\ud83c\udf6c\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e1f\u0e34\u0e25\u0e4c\u0e21\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\u0e1b\u0e23\u0e30\u0e01\u0e1a\u0e01\u0e31\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e1f\u0e2d\u0e22\u0e25\u0e4c\u0e42\u0e25\u0e2b\u0e30 (Laminate) \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49 \u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e04\u0e38\u0e49\u0e21\u0e17\u0e38\u0e19 \u0e08\u0e36\u0e07\u0e08\u0e31\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e1c\u0e32\u0e40\u0e0a\u0e34\u0e07\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19\" },\n { id: 8, name: \"\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e32\u0e01\u0e2d\u0e19\u0e32\u0e21\u0e31\u0e22\", emoji: \"\ud83d\ude37\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e22\u0e2a\u0e31\u0e07\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e22\u0e32\u0e01 \u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e17\u0e35\u0e48\u0e21\u0e35\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e1b\u0e19\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e40\u0e0a\u0e37\u0e49\u0e2d\u0e42\u0e23\u0e04\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e04\u0e31\u0e14\u0e2b\u0e25\u0e31\u0e48\u0e07 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e1a\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e34\u0e14\u0e0a\u0e34\u0e14\u0e41\u0e25\u0e49\u0e27\u0e17\u0e34\u0e49\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e1c\u0e32\u0e17\u0e33\u0e25\u0e32\u0e22\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\" },\n { id: 9, name: \"\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e19\u0e49\u0e33\", emoji: \"\ud83e\udd6b\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e23\u0e48\u0e42\u0e25\u0e2b\u0e30\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e48\u0e32\u0e2a\u0e39\u0e07\u0e41\u0e25\u0e30\u0e04\u0e07\u0e17\u0e19 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e1c\u0e48\u0e32\u0e19\u0e04\u0e27\u0e32\u0e21\u0e23\u0e49\u0e2d\u0e19\u0e2d\u0e38\u0e13\u0e2b\u0e20\u0e39\u0e21\u0e34\u0e2a\u0e39\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e25\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2d\u0e31\u0e14\u0e25\u0e21\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e22\u0e46 \u0e42\u0e14\u0e22\u0e0a\u0e48\u0e27\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e16\u0e36\u0e07 95% \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e31\u0e1a\u0e1c\u0e25\u0e34\u0e15\u0e43\u0e2b\u0e21\u0e48\" },\n { id: 10, name: \"\u0e41\u0e01\u0e49\u0e27\u0e19\u0e49\u0e33\u0e0a\u0e33\u0e23\u0e38\u0e14\", emoji: \"\ud83e\udd5b\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e41\u0e01\u0e49\u0e27\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e2b\u0e25\u0e2d\u0e21\u0e17\u0e23\u0e32\u0e22\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2b\u0e25\u0e2d\u0e21\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e44\u0e21\u0e48\u0e21\u0e35\u0e08\u0e33\u0e01\u0e31\u0e14\u0e23\u0e2d\u0e1a \u0e41\u0e15\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e23\u0e30\u0e21\u0e31\u0e14\u0e23\u0e30\u0e27\u0e31\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e1a\u0e32\u0e14\u0e1c\u0e39\u0e49\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\" },\n { id: 11, name: \"\u0e40\u0e28\u0e29\u0e1c\u0e31\u0e01\", emoji: \"\ud83e\udd6c\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e28\u0e29\u0e0b\u0e32\u0e01\u0e1e\u0e37\u0e0a\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e27\u0e25\u0e2a\u0e32\u0e23\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e08\u0e32\u0e01\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34\u0e23\u0e49\u0e2d\u0e22\u0e40\u0e1b\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e47\u0e19\u0e15\u0e4c \u0e21\u0e35\u0e08\u0e38\u0e25\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e34\u0e48\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e19\u0e33\u0e44\u0e1b\u0e2b\u0e21\u0e31\u0e01\u0e17\u0e33\u0e19\u0e49\u0e33\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2d\u0e35\u0e40\u0e2d\u0e47\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e38\u0e4b\u0e22\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e14\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e23\u0e48\u0e27\u0e19\u0e0b\u0e38\u0e22\" },\n { id: 12, name: \"\u0e01\u0e32\u0e01\u0e01\u0e32\u0e41\u0e1f\", emoji: \"\u2615\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e01\u0e40\u0e21\u0e25\u0e47\u0e14\u0e1e\u0e37\u0e0a\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c \u0e21\u0e35\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e14\u0e48\u0e19\u0e04\u0e37\u0e2d\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e44\u0e19\u0e42\u0e15\u0e23\u0e40\u0e08\u0e19\u0e2a\u0e39\u0e07\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e0a\u0e48\u0e27\u0e22\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e14\u0e34\u0e19 \u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e20\u0e32\u0e1e\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e14\u0e14\u0e48\u0e32\u0e07 \u0e41\u0e25\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e02\u0e31\u0e1a\u0e44\u0e25\u0e48\u0e41\u0e21\u0e25\u0e07\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e1a\u0e32\u0e07\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e34\u0e15\u0e23\u0e15\u0e48\u0e2d\u0e42\u0e25\u0e01\" },\n { id: 13, name: \"\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e2a\u0e40\u0e1b\u0e23\u0e22\u0e4c\", emoji: \"\ud83d\udd8d\ufe0f\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e22\u0e31\u0e07\u0e04\u0e07\u0e21\u0e35\u0e41\u0e23\u0e07\u0e14\u0e31\u0e19\u0e41\u0e01\u0e4a\u0e2a\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e25\u0e30\u0e25\u0e32\u0e22\u0e40\u0e04\u0e21\u0e35\u0e2b\u0e25\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e2d\u0e22\u0e39\u0e48 \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e41\u0e23\u0e07\u0e01\u0e23\u0e30\u0e41\u0e17\u0e01\u0e2b\u0e23\u0e37\u0e2d\u0e42\u0e14\u0e19\u0e04\u0e27\u0e32\u0e21\u0e23\u0e49\u0e2d\u0e19\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e08\u0e40\u0e01\u0e34\u0e14\u0e01\u0e32\u0e23\u0e23\u0e30\u0e40\u0e1a\u0e34\u0e14\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e01\u0e34\u0e14\u0e40\u0e1e\u0e25\u0e34\u0e07\u0e44\u0e2b\u0e21\u0e49\u0e44\u0e14\u0e49 \u0e08\u0e36\u0e07\u0e2b\u0e49\u0e32\u0e21\u0e17\u0e34\u0e49\u0e07\u0e1b\u0e30\u0e1b\u0e19\u0e01\u0e31\u0e1a\u0e02\u0e22\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2d\u0e37\u0e48\u0e19\u0e40\u0e14\u0e47\u0e14\u0e02\u0e32\u0e14\" },\n { id: 14, name: \"\u0e19\u0e49\u0e33\u0e22\u0e32\u0e0b\u0e31\u0e01\u0e25\u0e49\u0e32\u0e07\", emoji: \"\ud83e\uddf4\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e1c\u0e2a\u0e21\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e23\u0e40\u0e04\u0e21\u0e35\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e31\u0e14\u0e01\u0e23\u0e48\u0e2d\u0e19 \u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29 \u0e41\u0e25\u0e30\u0e17\u0e33\u0e1b\u0e0f\u0e34\u0e01\u0e34\u0e23\u0e34\u0e22\u0e32\u0e01\u0e31\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e1a\u0e23\u0e23\u0e08\u0e38\u0e43\u0e19\u0e20\u0e32\u0e0a\u0e19\u0e30\u0e17\u0e35\u0e48\u0e1b\u0e34\u0e14\u0e41\u0e19\u0e48\u0e19\u0e41\u0e25\u0e30\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e43\u0e2b\u0e49\u0e17\u0e32\u0e07\u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25\u0e19\u0e33\u0e44\u0e1b\u0e1a\u0e33\u0e1a\u0e31\u0e14\u0e14\u0e49\u0e27\u0e22\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e40\u0e04\u0e21\u0e35\" },\n { id: 15, name: \"\u0e16\u0e38\u0e07\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e41\u0e01\u0e07\", emoji: \"\ud83d\udecd\ufe0f\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e41\u0e21\u0e49\u0e08\u0e30\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01 \u0e41\u0e15\u0e48\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e04\u0e23\u0e32\u0e1a\u0e19\u0e49\u0e33\u0e21\u0e31\u0e19 \u0e04\u0e23\u0e32\u0e1a\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e01\u0e07 \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e1b\u0e0f\u0e34\u0e01\u0e39\u0e25\u0e2a\u0e01\u0e1b\u0e23\u0e01\u0e1b\u0e23\u0e34\u0e21\u0e32\u0e13\u0e21\u0e32\u0e01 \u0e08\u0e36\u0e07\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e2d\u0e32\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49\u0e22\u0e32\u0e01\u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e17\u0e32\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e34\u0e49\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\" },\n { id: 16, name: \"\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e42\u0e1f\u0e21\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\", emoji: \"\ud83e\udd61\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e42\u0e1f\u0e21\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e42\u0e1e\u0e25\u0e35\u0e2a\u0e44\u0e15\u0e23\u0e35\u0e19\u0e02\u0e22\u0e32\u0e22\u0e15\u0e31\u0e27 (EPS) \u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e22\u0e32\u0e01\u0e21\u0e32\u0e01\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 (\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 500 \u0e1b\u0e35) \u0e22\u0e34\u0e48\u0e07\u0e21\u0e35\u0e04\u0e23\u0e32\u0e1a\u0e19\u0e49\u0e33\u0e21\u0e31\u0e19\u0e2a\u0e01\u0e1b\u0e23\u0e01\u0e08\u0e30\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49\u0e2d\u0e35\u0e01 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\" }\n ];\n\n \/\/ \u0e16\u0e31\u0e07\u0e02\u0e22\u0e30 4 \u0e2a\u0e35\n const BIN_TYPES = [\n { id: \"hazardous\", name: \"\u0e02\u0e22\u0e30\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\", color: \"#EF4444\", darkColor: \"#B91C1C\", logoType: \"\u2620\ufe0f\" },\n { id: \"wet\", name: \"\u0e02\u0e22\u0e30\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\", color: \"#16A34A\", darkColor: \"#15803D\", logoType: \"\ud83c\udf42\" },\n { id: \"recycle\", name: \"\u0e02\u0e22\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\", color: \"#FBBF24\", darkColor: \"#D97706\", logoType: \"\u267b\ufe0f\" },\n { id: \"general\", name: \"\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\", color: \"#3B82F6\", darkColor: \"#1D4ED8\", logoType: \"\ud83d\uddd1\ufe0f\" }\n ];\n\n \/\/ --- \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e01\u0e21\u0e41\u0e25\u0e30\u0e01\u0e25\u0e49\u0e2d\u0e07 ---\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n const videoElement = document.getElementById('webcam');\n \n let dpr = window.devicePixelRatio || 1;\n let width = window.innerWidth;\n let height = window.innerHeight;\n\n let gameState = 'welcome'; \n let score = 0;\n let statCorrect = 0;\n let statWrong = 0;\n let currentQuestionIndex = 0;\n let gamePlaylist = []; \n const MAX_QUESTIONS = 10; \/\/ \u0e08\u0e33\u0e01\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e48\u0e19\u0e41\u0e04\u0e48 10 \u0e02\u0e49\u0e2d\u0e15\u0e48\u0e2d\u0e40\u0e01\u0e21\n let currentTrash = null; \n let feedbackMessage = null; \n \n let particles = [];\n let bins = []; \n \n let trackingActive = false; \n let cameraEnabled = false; \n let isCameraInitializing = false;\n let handData = null; \n let handsDetector = null;\n let cameraHelper = null;\n\n let currentLibraryScene = 0; \n\n let pointer = {\n x: width \/ 2, y: height \/ 2,\n isPinching: false, grabbedItem: null,\n targetHovered: false, pinchState: 'normal', \n lastX: width \/ 2, lastY: height \/ 2\n };\n\n let isMouseDown = false;\n let mouseX = width \/ 2;\n let mouseY = height \/ 2;\n\n let trashAnimation = { scale: 1, bounce: 0, rotation: 0 };\n let wasPinching = false;\n\n let mascotMessageTimeout;\n\n \/\/ --- \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e08\u0e31\u0e14\u0e02\u0e19\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d ---\n function resizeCanvas() {\n width = window.innerWidth;\n height = window.innerHeight;\n \n canvas.width = width * dpr;\n canvas.height = height * dpr;\n ctx.scale(dpr, dpr);\n\n \/\/ \u0e04\u0e33\u0e19\u0e27\u0e13\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\n const binWidth = Math.min(160, width \/ 4.8);\n const binHeight = Math.min(180, height \/ 4.5);\n const binSpacing = (width - (binWidth * 4)) \/ 5;\n\n bins = BIN_TYPES.map((bin, index) => {\n const x = binSpacing + index * (binWidth + binSpacing);\n const y = height - binHeight - 35;\n return { ...bin, x: x, y: y, w: binWidth, h: binHeight, hovered: false };\n });\n\n if (currentTrash && !pointer.grabbedItem) {\n currentTrash.x = width \/ 2;\n currentTrash.y = height \/ 2 - 40;\n }\n }\n window.addEventListener('resize', resizeCanvas);\n\n \/\/ --- Game Controls ---\n function shufflePlaylist() {\n const indices = Array.from({length: TRASH_ITEMS.length}, (_, i) => i);\n for (let i = indices.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [indices[i], indices[j]] = [indices[j], indices[i]];\n }\n \/\/ \u0e15\u0e31\u0e14\u0e2d\u0e32\u0e23\u0e4c\u0e40\u0e23\u0e22\u0e4c\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e41\u0e04\u0e48\u0e08\u0e33\u0e19\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14 (10 \u0e02\u0e49\u0e2d)\n gamePlaylist = indices.slice(0, MAX_QUESTIONS);\n }\n\n function spawnTrash() {\n if (currentQuestionIndex >= gamePlaylist.length) {\n currentTrash = null; \/\/ \u0e0b\u0e48\u0e2d\u0e19\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22\n setTimeout(endGame, 800); \/\/ \u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e40\u0e2d\u0e1f\u0e40\u0e1f\u0e01\u0e15\u0e4c\u0e15\u0e2d\u0e1a\u0e16\u0e39\u0e01\n return;\n }\n\n const itemIndex = gamePlaylist[currentQuestionIndex];\n const trashData = TRASH_ITEMS[itemIndex];\n\n currentTrash = {\n ...trashData,\n x: width \/ 2, y: height \/ 2 - 40,\n radius: 60, targetRadius: 60,\n targetX: width \/ 2, targetY: height \/ 2 - 40,\n isBeingDragged: false, vx: 0, vy: 0\n };\n\n pointer.grabbedItem = null;\n pointer.targetHovered = false;\n document.getElementById('progressDisplay').innerText = `${currentQuestionIndex + 1} \/ ${gamePlaylist.length}`;\n }\n\n \/\/ --- Visual Effects & Mascot Interaction ---\n function showMascotMessage(text, textColorClass = \"text-[#00205B]\", borderColorClass = \"border-[#FBBF24]\") {\n const bubble = document.getElementById('mascotBubble');\n bubble.innerText = text;\n bubble.className = `bg-white text-xs md:text-sm font-bold px-4 py-2 rounded-2xl rounded-bl-none shadow-lg mb-2 transition-all duration-300 transform border-2 ${textColorClass} ${borderColorClass} max-w-[150px] whitespace-pre-wrap leading-tight`;\n \n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\n bubble.classList.remove('opacity-0', 'translate-y-2');\n \n if (mascotMessageTimeout) clearTimeout(mascotMessageTimeout);\n mascotMessageTimeout = setTimeout(() => {\n bubble.classList.add('opacity-0', 'translate-y-2');\n }, 3000);\n }\n\n function createParticles(x, y, count, isSuccess) {\n const colors = isSuccess ? [\"#22C55E\", \"#86EFAC\", \"#BBF7D0\"] : [\"#EF4444\", \"#FCA5A5\", \"#EF4444\"];\n for (let i = 0; i < count; i++) {\n particles.push({\n x: x, y: y,\n vx: (Math.random() - 0.5) * 10,\n vy: (Math.random() - 0.5) * 10 - (Math.random() * 5),\n radius: Math.random() * 5 + 3,\n color: colors[Math.floor(Math.random() * colors.length)],\n alpha: 1, decay: Math.random() * 0.02 + 0.015\n });\n }\n }\n\n function createFeedback(text, isSuccess) {\n feedbackMessage = {\n text: text, x: width \/ 2, y: height \/ 2 - 120,\n alpha: 1, color: isSuccess ? \"#86EFAC\" : \"#FCA5A5\"\n };\n }\n\n \/\/ AR Interaction Click\n function triggerPinchClick(x, y) {\n const elem = document.elementFromPoint(x, y);\n if (!elem) return;\n \n let target = elem;\n while (target && target !== document.body) {\n if (target.tagName === 'BUTTON' || target.tagName === 'SELECT' || target.onclick || target.getAttribute('role') === 'button') {\n target.classList.add('scale-95');\n setTimeout(() => target.classList.remove('scale-95'), 150);\n target.click();\n break;\n }\n target = target.parentElement;\n }\n }\n\n function showWrongAnswerExplanation(trash) {\n gameState = 'paused';\n \n document.getElementById('expTrashName').innerText = trash.name;\n const correctBin = BIN_TYPES.find(b => b.id === trash.type);\n const correctBinDisplay = document.getElementById('expCorrectBin');\n correctBinDisplay.innerText = correctBin.name;\n correctBinDisplay.style.color = correctBin.color;\n \n document.getElementById('expDetail').innerText = trash.explanation;\n document.getElementById('explanationModal').classList.remove('hidden');\n \n const modalCanvas = document.getElementById('modalTrashCanvas');\n const mCtx = modalCanvas.getContext('2d');\n mCtx.clearRect(0, 0, 90, 90);\n mCtx.save();\n mCtx.translate(45, 45);\n mCtx.shadowColor = \"rgba(0,0,0,0.5)\";\n mCtx.shadowBlur = 6;\n mCtx.shadowOffsetY = 3;\n drawRealisticTrashItem(mCtx, trash.id, 40);\n mCtx.restore();\n }\n\n function processGamePhysics() {\n particles.forEach((p, index) => {\n p.x += p.vx;\n p.y += p.vy;\n p.vy += 0.22; \n p.alpha -= p.decay;\n if (p.alpha <= 0) particles.splice(index, 1);\n });\n\n if (feedbackMessage) {\n feedbackMessage.y -= 1.2;\n feedbackMessage.alpha -= 0.012;\n if (feedbackMessage.alpha <= 0) feedbackMessage = null;\n }\n\n \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01 Input (AR \u0e2b\u0e23\u0e37\u0e2d Mouse)\n let checkX = (trackingActive && cameraEnabled) ? pointer.x : mouseX;\n let checkY = (trackingActive && cameraEnabled) ? pointer.y : mouseY;\n let grabTrigger = (trackingActive && cameraEnabled) ? pointer.isPinching : isMouseDown;\n\n pointer.lastX += (checkX - pointer.lastX) * 0.35;\n pointer.lastY += (checkY - pointer.lastY) * 0.35;\n\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e08\u0e31\u0e1a Pinch Click\n if (trackingActive && cameraEnabled) {\n if (pointer.isPinching && !wasPinching) {\n triggerPinchClick(pointer.lastX, pointer.lastY);\n }\n wasPinching = pointer.isPinching;\n }\n\n if (gameState !== 'playing') return;\n\n if (currentTrash) {\n const dx = pointer.lastX - currentTrash.x;\n const dy = pointer.lastY - currentTrash.y;\n const distToTrash = Math.sqrt(dx * dx + dy * dy);\n\n if (grabTrigger && distToTrash < currentTrash.radius + 30 && !pointer.grabbedItem) {\n pointer.grabbedItem = currentTrash;\n currentTrash.isBeingDragged = true;\n playSound('grab');\n }\n\n if (pointer.grabbedItem === currentTrash) {\n if (grabTrigger) {\n currentTrash.x = pointer.lastX;\n currentTrash.y = pointer.lastY;\n trashAnimation.scale = 1.3; \n trashAnimation.bounce += 0.1;\n \n let overBin = false;\n bins.forEach(bin => {\n if (currentTrash.x > bin.x && currentTrash.x < bin.x + bin.w &&\n currentTrash.y > bin.y && currentTrash.y < bin.y + bin.h) {\n bin.hovered = true;\n overBin = true;\n pointer.targetHovered = true;\n } else {\n bin.hovered = false;\n }\n });\n \n pointer.pinchState = overBin ? 'hover' : 'grabbing';\n } else {\n currentTrash.isBeingDragged = false;\n pointer.grabbedItem = null;\n trashAnimation.scale = 1.0;\n \n let landedInBin = null;\n bins.forEach(bin => {\n if (currentTrash.x > bin.x && currentTrash.x < bin.x + bin.w &&\n currentTrash.y > bin.y && currentTrash.y < bin.y + bin.h) {\n landedInBin = bin;\n }\n bin.hovered = false;\n });\n\n if (landedInBin) {\n if (currentTrash.type === landedInBin.id) {\n score += 10;\n statCorrect++;\n playSound('correct');\n createParticles(currentTrash.x, currentTrash.y, 45, true);\n createFeedback(\"\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21! \ud83c\udf31\", true);\n showMascotMessage(\"\u0e40\u0e01\u0e48\u0e07\u0e21\u0e32\u0e01\u0e04\u0e23\u0e31\u0e1a! \ud83c\udf1f\", \"text-green-600\", \"border-green-400\");\n document.getElementById('scoreDisplay').innerText = score;\n \n currentQuestionIndex++;\n spawnTrash();\n } else {\n score = Math.max(0, score - 5);\n statWrong++;\n playSound('wrong');\n createParticles(currentTrash.x, currentTrash.y, 30, false);\n document.getElementById('scoreDisplay').innerText = score;\n showWrongAnswerExplanation(currentTrash);\n }\n } else {\n currentTrash.vx = (width \/ 2 - currentTrash.x) * 0.18;\n currentTrash.vy = ((height \/ 2 - 40) - currentTrash.y) * 0.18;\n playSound('click');\n }\n pointer.targetHovered = false;\n pointer.pinchState = 'normal';\n }\n } else {\n if (currentTrash.vx !== 0 || currentTrash.vy !== 0) {\n currentTrash.x += currentTrash.vx;\n currentTrash.y += currentTrash.vy;\n currentTrash.vx *= 0.8;\n currentTrash.vy *= 0.8;\n if (Math.abs(currentTrash.vx) < 0.1) currentTrash.vx = 0;\n if (Math.abs(currentTrash.vy) < 0.1) currentTrash.vy = 0;\n }\n }\n }\n }\n\n \/\/ --- DRAWING: \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e09\u0e32\u0e01\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14 ---\n \n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e15\u0e39\u0e49\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e1a\u0e1a\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 (\u0e2a\u0e35\u0e44\u0e21\u0e49\u0e2d\u0e48\u0e2d\u0e19, \u0e21\u0e35\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21)\n function drawDetailedBookshelf(context, x, y, w, h, alpha) {\n context.save();\n context.globalAlpha = alpha;\n \n \/\/ \u0e42\u0e04\u0e23\u0e07\u0e15\u0e39\u0e49\u0e44\u0e21\u0e49\u0e14\u0e49\u0e32\u0e19\u0e19\u0e2d\u0e01\n context.fillStyle = '#A66B40'; \n context.fillRect(x, y, w, h);\n \n \/\/ \u0e40\u0e07\u0e32\u0e25\u0e36\u0e01\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e0a\u0e31\u0e49\u0e19\n context.fillStyle = '#6B4226'; \n context.fillRect(x + 12, y + 12, w - 24, h - 24);\n\n const shelfCount = 5;\n const shelfH = (h - 24) \/ shelfCount;\n\n \/\/ \u0e0a\u0e31\u0e49\u0e19\u0e27\u0e32\u0e07\u0e02\u0e2d\u0e07\n context.fillStyle = '#C28254'; \n for (let i = 1; i < shelfCount; i++) {\n context.fillRect(x + 12, y + 12 + i * shelfH - 6, w - 24, 12);\n context.fillStyle = '#DBA374'; \/\/ \u0e44\u0e2e\u0e44\u0e25\u0e17\u0e4c\u0e2a\u0e31\u0e19\u0e44\u0e21\u0e49\n context.fillRect(x + 12, y + 12 + i * shelfH - 6, w - 24, 3);\n context.fillStyle = '#C28254';\n }\n\n \/\/ \u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2b\u0e25\u0e32\u0e01\u0e2a\u0e35\n const bookColors = ['#1D4ED8', '#B91C1C', '#15803D', '#F59E0B', '#F3F4F6', '#374151', '#7E22CE'];\n let bookSeed = x + y + w;\n function pRand() { bookSeed = (bookSeed * 9301 + 49297) % 233280; return bookSeed \/ 233280; }\n\n for (let shelf = 0; shelf < shelfCount; shelf++) {\n const shelfY = y + 12 + (shelf + 1) * shelfH - 6;\n let cX = x + 16;\n const endX = x + w - 16;\n\n while (cX < endX - 12) {\n const bW = Math.floor(pRand() * 14) + 6;\n const bH = Math.floor(pRand() * (shelfH - 25)) + 15;\n if (cX + bW > endX) break;\n\n context.fillStyle = bookColors[Math.floor(pRand() * bookColors.length)];\n \n if (pRand() > 0.85 && cX < endX - 25) {\n \/\/ \u0e27\u0e32\u0e14\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e1a\u0e1a\u0e40\u0e2d\u0e35\u0e22\u0e07\u0e46\n context.save();\n context.translate(cX, shelfY);\n context.rotate(0.15); \n context.fillRect(0, -bH, bW, bH);\n context.restore();\n cX += bW + 6;\n } else {\n \/\/ \u0e27\u0e32\u0e14\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e15\u0e31\u0e49\u0e07\u0e15\u0e23\u0e07\n context.fillRect(cX, shelfY - bH, bW, bH);\n context.fillStyle = 'rgba(0,0,0,0.15)'; \/\/ \u0e23\u0e48\u0e2d\u0e07\u0e2a\u0e31\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\n context.fillRect(cX + 2, shelfY - bH, 2, bH);\n cX += bW + 2;\n }\n }\n }\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d \u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e20\u0e32\u0e1e\u0e40\u0e23\u0e1f\u0e40\u0e1f\u0e2d\u0e23\u0e4c\u0e40\u0e23\u0e19\u0e0b\u0e4c\n function drawNRRULibraryReferenceScene(context, w, h, alpha) {\n context.save();\n\n \/\/ 1. \u0e41\u0e1a\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e1b\u0e49\u0e32\u0e22\u0e44\u0e27\u0e19\u0e34\u0e25\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e41\u0e02\u0e27\u0e19\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 (\u0e08\u0e31\u0e14\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e2b\u0e49\u0e44\u0e21\u0e48\u0e21\u0e35\u0e40\u0e2a\u0e32\u0e1a\u0e31\u0e07)\n const bannerW = Math.min(500, w * 0.7);\n const bannerH = 65;\n const bannerX = (w - bannerW) \/ 2; \n const bannerY = 85; \n \n context.globalAlpha = alpha * 0.6; \/\/ \u0e43\u0e2b\u0e49\u0e1b\u0e49\u0e32\u0e22\u0e08\u0e32\u0e07\u0e25\u0e07\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22 \u0e44\u0e21\u0e48\u0e41\u0e22\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e19\u0e43\u0e08\n context.fillStyle = '#1E3A8A';\n context.fillRect(bannerX, bannerY, bannerW, bannerH);\n context.strokeStyle = '#FBBF24'; \/\/ \u0e02\u0e2d\u0e1a\u0e17\u0e2d\u0e07\n context.lineWidth = 2;\n context.strokeRect(bannerX + 5, bannerY + 5, bannerW - 10, bannerH - 10);\n \n context.fillStyle = '#FBBF24';\n context.font = 'bold 18px Kanit';\n context.textAlign = 'center';\n context.fillText('\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e19\u0e04\u0e23\u0e23\u0e32\u0e0a\u0e2a\u0e35\u0e21\u0e32', bannerX + bannerW\/2, bannerY + 25);\n context.fillStyle = '#FFFFFF';\n context.font = '13px Arial';\n context.fillText('Nakhon Ratchasima Rajabhat University', bannerX + bannerW\/2, bannerY + 42);\n context.font = '11px Arial';\n context.fillStyle = '#FBBF24';\n context.fillText('Library & Information Services', bannerX + bannerW\/2, bannerY + 55);\n\n \/\/ 2. \u0e27\u0e32\u0e14\u0e15\u0e39\u0e49\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e02\u0e19\u0e32\u0e1a\u0e0b\u0e49\u0e32\u0e22\u0e41\u0e25\u0e30\u0e02\u0e27\u0e32 (\u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e08\u0e32\u0e07\u0e25\u0e07\u0e21\u0e32\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e01\u0e27\u0e19\u0e40\u0e01\u0e21\u0e40\u0e1e\u0e25\u0e22\u0e4c)\n const fadedAlpha = alpha * 0.25; \/\/ \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e08\u0e32\u0e07\u0e25\u0e07 \u0e42\u0e1b\u0e23\u0e48\u0e07\u0e41\u0e2a\u0e07\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19\n drawDetailedBookshelf(context, 0, 0, w * 0.25, h, fadedAlpha);\n drawDetailedBookshelf(context, w - w * 0.25, 0, w * 0.25, h, fadedAlpha);\n\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e42\u0e0b\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (IT Service) \u0e15\u0e32\u0e21\u0e20\u0e32\u0e1e\u0e41\u0e19\u0e1a\n function drawITServiceScene(context, w, h, alpha) {\n context.save();\n \/\/ \u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e09\u0e32\u0e01\u0e08\u0e32\u0e07\u0e25\u0e07 (\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e41\u0e2a\u0e07\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e41\u0e22\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e19\u0e43\u0e08\u0e08\u0e32\u0e01\u0e40\u0e01\u0e21\n context.globalAlpha = alpha * 0.3;\n\n \/\/ 1. \u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e49\u0e2d\u0e07 (\u0e25\u0e32\u0e22\u0e44\u0e21\u0e49)\n context.fillStyle = '#9C623A';\n context.fillRect(0, h * 0.5, w, h * 0.5);\n\n \/\/ 2. \u0e1c\u0e19\u0e31\u0e07\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e38\u0e14 (\u0e2a\u0e35\u0e40\u0e17\u0e32\u0e2d\u0e48\u0e2d\u0e19)\n context.fillStyle = '#6B7280';\n context.fillRect(w * 0.3, 0, w * 0.3, h * 0.5);\n\n \/\/ \u0e08\u0e2d\u0e17\u0e35\u0e27\u0e35\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e38\u0e14\n context.fillStyle = '#111827';\n context.fillRect(w * 0.35, h * 0.15, w * 0.15, h * 0.15);\n context.fillStyle = '#3B82F6';\n context.fillRect(w * 0.35 + 2, h * 0.15 + 2, w * 0.15 - 4, h * 0.15 - 4);\n context.fillStyle = '#FFFFFF';\n context.font = 'bold 12px Kanit';\n context.textAlign = 'center';\n context.fillText('NRRU Library', w * 0.425, h * 0.23);\n\n \/\/ 3. \u0e1c\u0e19\u0e31\u0e07\u0e1d\u0e31\u0e48\u0e07\u0e0b\u0e49\u0e32\u0e22 (\u0e2a\u0e35\u0e40\u0e17\u0e32\u0e40\u0e02\u0e49\u0e21)\n context.fillStyle = '#374151';\n context.beginPath();\n context.moveTo(0, 0);\n context.lineTo(w * 0.3, 0);\n context.lineTo(w * 0.3, h * 0.5);\n context.lineTo(0, h * 0.7);\n context.fill();\n\n \/\/ \u0e42\u0e25\u0e42\u0e01\u0e49 NRRU \u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e1a\u0e19\u0e1c\u0e19\u0e31\u0e07\u0e0b\u0e49\u0e32\u0e22\n context.fillStyle = '#1E3A8A';\n context.beginPath();\n context.arc(w * 0.12, h * 0.25, Math.min(w, h) * 0.08, 0, Math.PI * 2);\n context.fill();\n context.strokeStyle = '#FBBF24';\n context.lineWidth = 4;\n context.stroke();\n context.fillStyle = '#FBBF24';\n context.font = 'bold 20px Kanit';\n context.fillText('NRRU', w * 0.12, h * 0.25 + 7);\n\n context.fillStyle = '#FFFFFF';\n context.font = 'bold 16px Kanit';\n context.textAlign = 'left';\n context.fillText('\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28', w * 0.02, h * 0.45);\n context.fillStyle = '#D1D5DB';\n context.font = '12px Arial';\n context.fillText('IT@NRRU Library', w * 0.02, h * 0.48);\n\n \/\/ 4. \u0e1c\u0e19\u0e31\u0e07\u0e1d\u0e31\u0e48\u0e07\u0e02\u0e27\u0e32 (\u0e2b\u0e49\u0e2d\u0e07 Discussion Room)\n context.fillStyle = '#E5E7EB';\n context.beginPath();\n context.moveTo(w * 0.6, 0);\n context.lineTo(w, 0);\n context.lineTo(w, h);\n context.lineTo(w * 0.6, h * 0.5);\n context.fill();\n\n \/\/ \u0e1b\u0e23\u0e30\u0e15\u0e39\/\u0e01\u0e23\u0e30\u0e08\u0e01 Discussion Rooms (\u0e40\u0e23\u0e35\u0e22\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e14\u0e49\u0e27\u0e22 Perspective)\n for(let i=0; i<3; i++) {\n const perspectiveFactor = 1 + (i * 0.5);\n const doorW = w * 0.08 * perspectiveFactor;\n const doorH = h * 0.25 * perspectiveFactor;\n const doorX = w * 0.62 + (i * w * 0.12);\n const doorY = h * 0.2 - (i * h * 0.02);\n \n context.fillStyle = '#4B5563'; \/\/ \u0e01\u0e23\u0e2d\u0e1a\u0e1b\u0e23\u0e30\u0e15\u0e39\n context.fillRect(doorX - 3, doorY - 3, doorW + 6, doorH + 6);\n context.fillStyle = 'rgba(186, 230, 253, 0.6)'; \/\/ \u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e01\u0e23\u0e30\u0e08\u0e01\n context.fillRect(doorX, doorY, doorW, doorH);\n\n context.fillStyle = '#1F2937'; \/\/ \u0e1b\u0e49\u0e32\u0e22\n context.fillRect(doorX, doorY - 35 * perspectiveFactor, doorW, 25 * perspectiveFactor);\n context.fillStyle = '#FFFFFF';\n context.font = 'bold ' + Math.floor(10 * perspectiveFactor) + 'px Kanit';\n context.textAlign = 'center';\n context.fillText('Room ' + (3-i), doorX + doorW\/2, doorY - 18 * perspectiveFactor);\n }\n\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e09\u0e32\u0e01\u0e40\u0e14\u0e34\u0e21\u0e2d\u0e37\u0e48\u0e19\u0e46 \u0e04\u0e07\u0e44\u0e27\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e09\u0e32\u0e01\n function drawVectorBookshelf(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.fillStyle = '#78350F'; context.fillRect(x, y, w, h);\n context.fillStyle = '#451A03'; context.fillRect(x + 6, y + 6, w - 12, h - 12);\n const shelfCount = 3; const shelfH = (h - 12) \/ shelfCount;\n context.fillStyle = '#92400E';\n for (let i = 1; i < shelfCount; i++) context.fillRect(x + 6, y + 6 + i * shelfH - 3, w - 12, 6);\n \n const bookColors = ['#EF4444', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];\n let bookSeed = x + y;\n function pseudoRand() { bookSeed = (bookSeed * 9301 + 49297) % 233280; return bookSeed \/ 233280; }\n\n for (let shelf = 0; shelf < shelfCount; shelf++) {\n const shelfY = y + 6 + (shelf + 1) * shelfH - 3;\n let currentX = x + 12; const shelfEndX = x + w - 12;\n while (currentX < shelfEndX - 8) {\n const bW = Math.floor(pseudoRand() * 8) + 6;\n const bH = Math.floor(pseudoRand() * (shelfH - 20)) + 15;\n if (currentX + bW > shelfEndX) break;\n context.fillStyle = bookColors[Math.floor(pseudoRand() * bookColors.length)];\n context.fillRect(currentX, shelfY - bH, bW, bH);\n currentX += bW + 2;\n }\n }\n context.restore();\n }\n\n function drawVectorReadingCorner(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.fillStyle = '#115E59'; \n context.beginPath(); context.roundRect(x, y + h - 50, w, 50, [15, 15, 0, 0]); context.fill();\n context.fillStyle = '#14B8A6';\n for (let i = 0; i < 3; i++) {\n context.beginPath(); context.roundRect(x + 15 + i * (w\/3.5), y + h - 85, w\/4.5, 45, 10); context.fill();\n }\n context.restore();\n }\n\n function drawVectorWindow(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n const skyGrad = context.createLinearGradient(x, y, x, y + h);\n skyGrad.addColorStop(0, '#BAE6FD'); skyGrad.addColorStop(1, '#E0F2FE');\n context.fillStyle = skyGrad;\n context.beginPath(); context.moveTo(x, y + h); context.lineTo(x, y + w\/2);\n context.arc(x + w\/2, y + w\/2, w\/2, Math.PI, 0); context.lineTo(x + w, y + h); context.fill();\n context.fillStyle = '#FEF08A'; context.beginPath(); context.arc(x + w - 35, y + 40, 20, 0, Math.PI * 2); context.fill();\n context.strokeStyle = '#FFFFFF'; context.lineWidth = 5; context.stroke();\n context.restore();\n }\n\n function drawVectorHangingVines(context, x, y, len, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.strokeStyle = '#15803D'; context.lineWidth = 2.5;\n context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(x - 15, y + len\/2, x - 5, y + len); context.stroke();\n context.fillStyle = '#22C55E';\n for (let i = 1; i <= 6; i++) {\n const leafY = y + (len \/ 7) * i; const leafX = x - 8 + Math.sin(i) * 6;\n context.beginPath(); context.ellipse(leafX, leafY, 7, 3.5, Math.PI\/4 * (i%2===0?1:-1), 0, Math.PI * 2); context.fill();\n }\n context.restore();\n }\n\n \/\/ --- DRAWING: \u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\u0e41\u0e25\u0e30\u0e44\u0e2d\u0e40\u0e17\u0e21 ---\n function drawBMABin(bin) {\n ctx.save();\n const taper = 12; \/\/ \u0e01\u0e49\u0e19\u0e16\u0e31\u0e07\u0e2a\u0e2d\u0e1a\u0e40\u0e02\u0e49\u0e32\n const lidHeight = 22;\n \n \/\/ \u0e40\u0e07\u0e32\u0e02\u0e2d\u0e07\u0e16\u0e31\u0e07 (Hover effect)\n if(bin.hovered) {\n ctx.shadowColor = bin.color;\n ctx.shadowBlur = 20;\n } else {\n ctx.shadowColor = 'rgba(0,0,0,0.4)';\n ctx.shadowBlur = 10;\n ctx.shadowOffsetY = 5;\n }\n\n \/\/ 1. \u0e15\u0e31\u0e27\u0e16\u0e31\u0e07\n ctx.fillStyle = `${bin.color}E6`;\n ctx.strokeStyle = bin.darkColor;\n ctx.lineWidth = 3;\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(bin.x + taper, bin.y + lidHeight);\n ctx.lineTo(bin.x + bin.w - taper, bin.y + lidHeight);\n ctx.lineTo(bin.x + bin.w - taper * 2, bin.y + bin.h);\n ctx.lineTo(bin.x + taper * 2, bin.y + bin.h);\n ctx.closePath();\n ctx.fill(); ctx.stroke();\n\n \/\/ 2. Texture \u0e40\u0e2a\u0e49\u0e19\u0e46 \u0e02\u0e49\u0e32\u0e07\u0e16\u0e31\u0e07\n ctx.save();\n ctx.shadowBlur = 0;\n ctx.strokeStyle = 'rgba(255,255,255,0.2)';\n ctx.lineWidth = 6; ctx.lineCap = 'round';\n ctx.beginPath();\n ctx.moveTo(bin.x + bin.w\/2 - 15, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2 - 10, bin.y + bin.h - 15);\n ctx.moveTo(bin.x + bin.w\/2, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2, bin.y + bin.h - 15);\n ctx.moveTo(bin.x + bin.w\/2 + 15, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2 + 10, bin.y + bin.h - 15);\n ctx.stroke();\n ctx.restore();\n\n \/\/ 3. \u0e1d\u0e32\u0e16\u0e31\u0e07\n ctx.beginPath();\n ctx.roundRect(bin.x, bin.y, bin.w, lidHeight, 6);\n ctx.fill(); ctx.stroke();\n\n \/\/ \u0e2b\u0e39\u0e08\u0e31\u0e1a\n ctx.beginPath();\n ctx.moveTo(bin.x + bin.w\/2 - 15, bin.y); ctx.lineTo(bin.x + bin.w\/2 + 15, bin.y);\n ctx.lineWidth = 6; ctx.stroke();\n\n \/\/ 4. \u0e1b\u0e49\u0e32\u0e22\u0e2a\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\n const labelW = bin.w - 30;\n const labelH = 55;\n const labelX = bin.x + (bin.w - labelW) \/ 2;\n const labelY = bin.y + lidHeight + 15;\n\n ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = 4; ctx.shadowOffsetY = 2;\n ctx.fillStyle = '#ffffff'; ctx.strokeStyle = '#e5e7eb'; ctx.lineWidth = 2;\n ctx.beginPath(); ctx.roundRect(labelX, labelY, labelW, labelH, 8);\n ctx.fill(); ctx.stroke();\n\n ctx.shadowBlur = 0;\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n ctx.font = '22px Arial';\n ctx.fillText(bin.logoType, bin.x + bin.w\/2, labelY + 16);\n ctx.fillStyle = '#1f2937';\n ctx.font = 'bold 13px Kanit';\n ctx.fillText(bin.name, bin.x + bin.w\/2, labelY + 40);\n\n ctx.restore();\n }\n\n function drawRealisticTrashItem(context, id, size) {\n \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e2d\u0e40\u0e17\u0e47\u0e21\n const item = TRASH_ITEMS.find(t => t.id === id);\n if(!item) return;\n\n \/\/ \u0e27\u0e32\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e36\u0e1a\u0e41\u0e2a\u0e07 100% (Solid Color) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\n context.fillStyle = '#FFFFFF'; \n context.strokeStyle = '#CBD5E1'; \n context.lineWidth = 3;\n context.beginPath();\n context.roundRect(-size\/2, -size\/2, size, size, 16);\n context.fill();\n context.stroke();\n\n \/\/ \u0e1b\u0e34\u0e14\u0e40\u0e07\u0e32\u0e01\u0e48\u0e2d\u0e19\u0e27\u0e32\u0e14\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34\u0e40\u0e1a\u0e25\u0e2d\n context.shadowColor = \"transparent\";\n\n \/\/ \u0e27\u0e32\u0e14\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34\u0e02\u0e22\u0e30\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07 (\u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e43\u0e2b\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19)\n context.font = `${size * 0.65}px Arial`;\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.fillText(item.emoji, 0, 5);\n }\n\n function drawFancyCursor() {\n ctx.save();\n ctx.beginPath();\n ctx.arc(pointer.lastX, pointer.lastY, 22, 0, Math.PI * 2);\n ctx.lineWidth = 4;\n \n if (pointer.pinchState === 'grabbing') {\n ctx.strokeStyle = '#22C55E';\n ctx.fillStyle = 'rgba(34, 197, 94, 0.3)';\n ctx.fill(); ctx.stroke();\n ctx.font = '16px Arial'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillStyle='#fff';\n ctx.fillText('\u2714\ufe0f', pointer.lastX, pointer.lastY);\n } else if (pointer.pinchState === 'hover') {\n ctx.strokeStyle = '#FBBF24';\n ctx.setLineDash([6, 6]);\n ctx.stroke();\n } else {\n ctx.strokeStyle = '#3B82F6';\n ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';\n ctx.fill(); ctx.stroke();\n }\n ctx.restore();\n }\n\n \/\/ --- RENDER LOOP ---\n function renderScene() {\n ctx.clearRect(0, 0, width, height);\n\n if (cameraEnabled && videoElement.readyState >= 2) {\n ctx.save();\n ctx.scale(-1, 1);\n ctx.drawImage(videoElement, -width, 0, width, height);\n ctx.restore();\n ctx.fillStyle = \"rgba(15, 23, 42, 0.65)\"; \n ctx.fillRect(0, 0, width, height);\n } else {\n const grad = ctx.createLinearGradient(0, 0, 0, height);\n if (currentLibraryScene === 0) { \n grad.addColorStop(0, '#FFFBEB'); \/\/ \u0e2a\u0e35\u0e04\u0e23\u0e35\u0e21\u0e2d\u0e1a\u0e2d\u0e38\u0e48\u0e19 \n grad.addColorStop(1, '#B45309'); \/\/ \u0e2a\u0e35\u0e44\u0e21\u0e49 \n }\n else if (currentLibraryScene === 1) { grad.addColorStop(0, '#0F172A'); grad.addColorStop(1, '#115E59'); }\n else if (currentLibraryScene === 2) { \n grad.addColorStop(0, '#374151'); \/\/ \u0e18\u0e35\u0e21 IT Service \u0e2a\u0e35\u0e40\u0e17\u0e32\n grad.addColorStop(1, '#5B21B6'); \/\/ \u0e2a\u0e35\u0e21\u0e48\u0e27\u0e07\n }\n else { grad.addColorStop(0, '#0F172A'); grad.addColorStop(1, '#1E3A8A'); }\n ctx.fillStyle = grad; ctx.fillRect(0, 0, width, height);\n }\n\n const overlayAlpha = cameraEnabled ? 0.42 : 1.0;\n\n if (gameState === 'playing' || gameState === 'paused' || gameState === 'instructions') {\n \n if (currentLibraryScene === 0) {\n \/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e09\u0e32\u0e01\u0e42\u0e0b\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e2d\u0e34\u0e07\u0e08\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e41\u0e19\u0e1a (\u0e44\u0e21\u0e48\u0e27\u0e32\u0e14\u0e15\u0e31\u0e27\u0e25\u0e30\u0e04\u0e23)\n drawNRRULibraryReferenceScene(ctx, width, height, overlayAlpha);\n } else if (currentLibraryScene === 1) {\n drawVectorReadingCorner(ctx, width * 0.16, height * 0.46, width * 0.68, height * 0.22, overlayAlpha);\n drawVectorBookshelf(ctx, 10, 90, width * 0.11, height * 0.45, overlayAlpha * 0.6);\n drawVectorBookshelf(ctx, width - width * 0.11 - 10, 90, width * 0.11, height * 0.45, overlayAlpha * 0.6);\n } else if (currentLibraryScene === 2) {\n \/\/ \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e07 \u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 IT Service\n drawITServiceScene(ctx, width, height, overlayAlpha);\n } else if (currentLibraryScene === 3) {\n ctx.save(); ctx.globalAlpha = overlayAlpha;\n ctx.fillStyle = '#065F46'; ctx.beginPath(); ctx.roundRect(width * 0.1, height * 0.55, width * 0.8, height * 0.15, 12); ctx.fill();\n ctx.fillStyle = '#34D399'; ctx.font = \"32px serif\"; ctx.textAlign = 'center'; ctx.fillText(\"\ud83c\udf3f NRRU GREEN SERVICE\", width\/2, height * 0.61);\n ctx.restore();\n }\n\n bins.forEach(bin => drawBMABin(bin));\n\n if (currentTrash) {\n ctx.save();\n ctx.translate(currentTrash.x, currentTrash.y);\n const currentScale = trashAnimation.scale + Math.sin(trashAnimation.bounce) * 0.05;\n ctx.scale(currentScale, currentScale);\n\n ctx.shadowColor = \"rgba(0, 0, 0, 0.85)\";\n ctx.shadowBlur = pointer.grabbedItem ? 25 : 12;\n ctx.shadowOffsetX = pointer.grabbedItem ? 6 : 3;\n ctx.shadowOffsetY = pointer.grabbedItem ? 12 : 5;\n\n drawRealisticTrashItem(ctx, currentTrash.id, 90); \n ctx.restore();\n\n ctx.save();\n ctx.translate(currentTrash.x, currentTrash.y);\n ctx.fillStyle = \"#FFFFFF\"; ctx.font = \"bold 20px Kanit\"; ctx.textAlign = \"center\";\n ctx.shadowColor = \"rgba(0,0,0,0.9)\"; ctx.shadowBlur = 6;\n ctx.fillText(currentTrash.name, 0, 75); \n ctx.restore();\n }\n\n if (cameraEnabled && trackingActive && handData && handData.multiHandLandmarks) {\n for (const landmarks of handData.multiHandLandmarks) {\n ctx.lineWidth = 3.5; ctx.strokeStyle = \"rgba(187, 247, 208, 0.6)\";\n const connections = [[0, 1], [1, 2], [2, 3], [3, 4], [0, 5], [5, 6], [6, 7], [7, 8], [5, 9], [9, 10], [10, 11], [11, 12], [9, 13], [13, 14], [14, 15], [15, 16], [13, 17], [17, 18], [18, 19], [19, 20], [0, 17]];\n connections.forEach(([i1, i2]) => {\n ctx.beginPath(); ctx.moveTo((1 - landmarks[i1].x) * width, landmarks[i1].y * height);\n ctx.lineTo((1 - landmarks[i2].x) * width, landmarks[i2].y * height); ctx.stroke();\n });\n ctx.fillStyle = \"#10B981\";\n landmarks.forEach(p => {\n ctx.beginPath(); ctx.arc((1 - p.x) * width, p.y * height, 4.5, 0, Math.PI * 2); ctx.fill();\n });\n }\n }\n\n particles.forEach(p => {\n ctx.save(); ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color;\n ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fill(); ctx.restore();\n });\n\n if (feedbackMessage) {\n ctx.save(); ctx.globalAlpha = feedbackMessage.alpha; ctx.fillStyle = feedbackMessage.color;\n ctx.font = \"bold 23px Kanit\"; ctx.textAlign = \"center\"; ctx.shadowColor = \"rgba(0,0,0,0.85)\"; ctx.shadowBlur = 6;\n ctx.fillText(feedbackMessage.text, feedbackMessage.x, feedbackMessage.y); ctx.restore();\n }\n\n drawFancyCursor();\n }\n }\n\n \/\/ --- MAIN GAME LOOP ---\n function gameLoop() {\n processGamePhysics();\n renderScene();\n requestAnimationFrame(gameLoop);\n }\n\n \/\/ --- MEDIAPIPE INITIALIZATION ---\n async function setupMediaPipe() {\n if (isCameraInitializing) return;\n isCameraInitializing = true;\n \n handsDetector = new Hands({locateFile: (file) => `https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/hands\/${file}`});\n handsDetector.setOptions({ maxNumHands: 1, modelComplexity: 1, minDetectionConfidence: 0.7, minTrackingConfidence: 0.7 });\n \n handsDetector.onResults((results) => {\n handData = results;\n if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {\n trackingActive = true;\n const landmarks = results.multiHandLandmarks[0];\n const indexTip = landmarks[8];\n const thumbTip = landmarks[4];\n \n pointer.x = (1 - indexTip.x) * width;\n pointer.y = indexTip.y * height;\n \n const tx = (1 - thumbTip.x) * width;\n const ty = thumbTip.y * height;\n const dist = Math.hypot(pointer.x - tx, pointer.y - ty);\n \n pointer.isPinching = dist < 50; \n \n document.getElementById('arStatusText').innerText = \"\u0e08\u0e31\u0e1a\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!\";\n document.getElementById('arStatusIndicator').classList.replace('bg-yellow-400', 'bg-green-400');\n document.getElementById('arStatusIndicator').classList.remove('animate-pulse');\n } else {\n trackingActive = false;\n document.getElementById('arStatusText').innerText = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07...\";\n document.getElementById('arStatusIndicator').classList.replace('bg-green-400', 'bg-yellow-400');\n document.getElementById('arStatusIndicator').classList.add('animate-pulse');\n }\n });\n\n cameraHelper = new Camera(videoElement, {\n onFrame: async () => {\n if (cameraEnabled) await handsDetector.send({image: videoElement});\n },\n width: 640, height: 480\n });\n \n try {\n await cameraHelper.start();\n cameraEnabled = true;\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\udfe2';\n document.getElementById('cameraStatusText').innerText = 'AR \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27';\n } catch (err) {\n console.error(\"Camera error:\", err);\n cameraEnabled = false;\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\uddb1\ufe0f';\n document.getElementById('cameraStatusText').innerText = '\u0e42\u0e2b\u0e21\u0e14\u0e40\u0e21\u0e32\u0e2a\u0e4c \/ \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19';\n document.getElementById('gameFooter').classList.add('hidden');\n }\n isCameraInitializing = false;\n }\n\n \/\/ --- GAME STATE FLOW ---\n function startGame() {\n score = 0; statCorrect = 0; statWrong = 0;\n currentQuestionIndex = 0;\n shufflePlaylist();\n spawnTrash();\n gameState = 'playing';\n \n document.getElementById('scoreDisplay').innerText = score;\n document.getElementById('gameHeader').classList.remove('opacity-0');\n document.getElementById('gameFooter').classList.remove('opacity-0');\n document.getElementById('instructionsScreen').classList.add('hidden');\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e19\u0e49\u0e2d\u0e07 Mascot \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e01\u0e21\n document.getElementById('inGameMascotContainer').classList.remove('opacity-0');\n setTimeout(() => showMascotMessage(\"\u0e25\u0e32\u0e01\u0e02\u0e22\u0e30\u0e25\u0e07\u0e16\u0e31\u0e07\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01\u0e2a\u0e35\u0e19\u0e30\u0e04\u0e23\u0e31\u0e1a! \u267b\ufe0f\", \"text-blue-600\", \"border-blue-300\"), 800);\n }\n\n function endGame() {\n gameState = 'gameover';\n document.getElementById('gameHeader').classList.add('opacity-0');\n document.getElementById('gameFooter').classList.add('opacity-0');\n document.getElementById('inGameMascotContainer').classList.add('opacity-0');\n document.getElementById('gameOverScreen').classList.remove('hidden');\n \n document.getElementById('finalScore').innerText = score;\n document.getElementById('finalCorrect').innerText = `${statCorrect} \/ ${gamePlaylist.length}`;\n document.getElementById('finalWrong').innerText = statWrong;\n \n const accuracy = gamePlaylist.length > 0 ? Math.round((statCorrect \/ gamePlaylist.length) * 100) : 0;\n document.getElementById('finalAccuracy').innerText = `${accuracy}%`;\n }\n\n \/\/ --- EVENT LISTENERS ---\n document.getElementById('btnEnterGame').addEventListener('click', () => {\n playSound('click');\n document.getElementById('welcomeScreen').classList.add('hidden');\n document.getElementById('instructionsScreen').classList.remove('hidden');\n setupMediaPipe(); \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e21\u0e40\u0e14\u0e25\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\n });\n\n document.getElementById('btnStartGame').addEventListener('click', () => {\n playSound('click');\n startGame();\n });\n\n document.getElementById('btnPlayAgain').addEventListener('click', () => {\n playSound('click');\n document.getElementById('gameOverScreen').classList.add('hidden');\n startGame();\n });\n\n document.getElementById('btnDismissExplanation').addEventListener('click', () => {\n playSound('click');\n document.getElementById('explanationModal').classList.add('hidden');\n currentQuestionIndex++;\n \n \/\/ \u0e40\u0e0a\u0e47\u0e04\u0e27\u0e48\u0e32\u0e08\u0e1a 10 \u0e02\u0e49\u0e2d\u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07 \u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e15\u0e2d\u0e1a\u0e1c\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22\n if (currentQuestionIndex >= gamePlaylist.length) {\n currentTrash = null;\n endGame();\n } else {\n spawnTrash();\n gameState = 'playing';\n setTimeout(() => showMascotMessage(\"\u0e21\u0e32\u0e1e\u0e22\u0e32\u0e22\u0e32\u0e21\u0e01\u0e31\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e19\u0e30! \ud83d\udcaa\", \"text-blue-600\", \"border-blue-400\"), 500);\n }\n });\n\n document.getElementById('btnRestart').addEventListener('click', () => {\n playSound('click');\n startGame();\n });\n\n document.getElementById('btnToggleCamera').addEventListener('click', () => {\n playSound('click');\n cameraEnabled = !cameraEnabled;\n if (cameraEnabled) {\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\udfe2';\n document.getElementById('cameraStatusText').innerText = 'AR \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27';\n document.getElementById('gameFooter').classList.remove('hidden');\n } else {\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\uddb1\ufe0f';\n document.getElementById('cameraStatusText').innerText = '\u0e42\u0e2b\u0e21\u0e14\u0e40\u0e21\u0e32\u0e2a\u0e4c \/ \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19';\n document.getElementById('gameFooter').classList.add('hidden');\n }\n });\n\n document.getElementById('sceneSelector').addEventListener('change', (e) => {\n currentLibraryScene = parseInt(e.target.value);\n playSound('click');\n });\n\n \/\/ Mouse & Touch Fallback Events\n function setMousePos(e) {\n mouseX = e.touches ? e.touches[0].clientX : e.clientX;\n mouseY = e.touches ? e.touches[0].clientY : e.clientY;\n }\n canvas.addEventListener('mousedown', (e) => { setMousePos(e); isMouseDown = true; });\n canvas.addEventListener('mousemove', setMousePos);\n canvas.addEventListener('mouseup', () => isMouseDown = false);\n canvas.addEventListener('touchstart', (e) => { e.preventDefault(); setMousePos(e); isMouseDown = true; }, {passive: false});\n canvas.addEventListener('touchmove', (e) => { e.preventDefault(); setMousePos(e); }, {passive: false});\n canvas.addEventListener('touchend', (e) => { e.preventDefault(); isMouseDown = false; }, {passive: false});\n\n \/\/ Initialize\n resizeCanvas();\n requestAnimationFrame(gameLoop);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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>NRRU Green Library – AR Waste Sorting Game \u0e04\u0e30\u0e41\u0e19\u0e19 0 \u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32 1 \/ 10 \u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14 \ud83d\udcda \u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30\ud83d\udecb\ufe0f \u0e21\u0e38\u0e21\u0e42\u0e0b\u0e1f\u0e32\u0e19\u0e31\u0e48\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01\ud83d\udcbb \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 IT\ud83c\udfe2 \u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e01\u0e23\u0e35\u0e19\u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c \ud83d\udd34 \u0e42\u0e2b\u0e25\u0e14 AR… \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48 \u0e0a\u0e48\u0e27\u0e22\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e19\u0e30! N \u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07… NRRU LIBRARY…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5673","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5673"}],"version-history":[{"count":5,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673\/revisions"}],"predecessor-version":[{"id":5678,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673\/revisions\/5678"}],"wp:attachment":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n NRRU Green Library - AR Waste Sorting Game<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/camera_utils\/camera_utils.js\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/hands\/hands.js\" crossorigin=\"anonymous\"><\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body {\n font-family: 'Kanit', sans-serif;\n background-color: #0f172a;\n overflow: hidden;\n user-select: none;\n -webkit-user-select: none;\n }\n \/* Glassmorphism Classes *\/\n .glass-panel {\n background: rgba(15, 23, 42, 0.45);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);\n }\n .glass-panel-dark {\n background: rgba(15, 23, 42, 0.7);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n }\n \/* Hide default video element but keep it for MediaPipe rendering *\/\n #webcam {\n transform: scaleX(-1);\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n }\n <\/style>\n<\/head>\n<body class=\"relative w-screen h-screen flex items-center justify-center text-white\">\n\n <script>\n const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n \n function playSound(type) {\n if (audioCtx.state === 'suspended') {\n audioCtx.resume();\n }\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.connect(gain);\n gain.connect(audioCtx.destination);\n\n if (type === 'click') {\n osc.type = 'sine';\n osc.frequency.setValueAtTime(600, audioCtx.currentTime);\n osc.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.1);\n gain.gain.setValueAtTime(0.12, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.1);\n } else if (type === 'grab') {\n osc.type = 'triangle';\n osc.frequency.setValueAtTime(320, audioCtx.currentTime);\n osc.frequency.setValueAtTime(460, audioCtx.currentTime + 0.05);\n gain.gain.setValueAtTime(0.18, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.15);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.15);\n } else if (type === 'correct') {\n osc.type = 'sine';\n osc.frequency.setValueAtTime(523.25, audioCtx.currentTime); \/\/ C5\n osc.frequency.setValueAtTime(659.25, audioCtx.currentTime + 0.08); \/\/ E5\n osc.frequency.setValueAtTime(783.99, audioCtx.currentTime + 0.16); \/\/ G5\n osc.frequency.setValueAtTime(1046.50, audioCtx.currentTime + 0.24); \/\/ C6\n gain.gain.setValueAtTime(0.15, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.45);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.45);\n } else if (type === 'wrong') {\n osc.type = 'sawtooth';\n osc.frequency.setValueAtTime(220, audioCtx.currentTime); \/\/ A3\n osc.frequency.setValueAtTime(138, audioCtx.currentTime + 0.12); \/\/ C#3\n gain.gain.setValueAtTime(0.2, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.01, audioCtx.currentTime + 0.38);\n osc.start();\n osc.stop(audioCtx.currentTime + 0.38);\n }\n }\n <\/script>\n\n \n <video id=\"webcam\" autoplay playsinline><\/video>\n\n \n <canvas id=\"gameCanvas\" class=\"absolute inset-0 w-full h-full object-cover z-10 touch-none\"><\/canvas>\n\n \n <div id=\"uiContainer\" class=\"absolute inset-0 z-20 pointer-events-none flex flex-col justify-between p-4 md:p-6\">\n \n \n <header id=\"gameHeader\" class=\"w-full flex justify-between items-center opacity-0 transition-opacity duration-500\">\n <div class=\"glass-panel rounded-2xl px-5 py-3 flex items-center gap-6 pointer-events-auto\">\n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase\">\u0e04\u0e30\u0e41\u0e19\u0e19<\/span>\n <span id=\"scoreDisplay\" class=\"text-3xl font-extrabold text-green-300 drop-shadow-md\">0<\/span>\n <\/div>\n <div class=\"h-8 w-[1px] bg-white\/20\"><\/div>\n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase\">\u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32<\/span>\n <span id=\"progressDisplay\" class=\"text-lg font-bold\">1 \/ 10<\/span>\n <\/div>\n <div class=\"h-8 w-[1px] bg-white\/20\"><\/div>\n \n <div class=\"flex flex-col\">\n <span class=\"text-xs text-green-200 tracking-wider font-semibold uppercase mb-0.5\">\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14<\/span>\n <select id=\"sceneSelector\" class=\"bg-slate-900\/80 text-white border border-white\/20 rounded-xl px-2.5 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-green-400 pointer-events-auto cursor-pointer font-medium\">\n <option value=\"0\">\ud83d\udcda \u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30<\/option>\n <option value=\"1\">\ud83d\udecb\ufe0f \u0e21\u0e38\u0e21\u0e42\u0e0b\u0e1f\u0e32\u0e19\u0e31\u0e48\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01<\/option>\n <option value=\"2\">\ud83d\udcbb \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 IT<\/option>\n <option value=\"3\">\ud83c\udfe2 \u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e01\u0e23\u0e35\u0e19\u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex gap-3 pointer-events-auto\">\n <button id=\"btnToggleCamera\" class=\"glass-panel hover:bg-green-600\/30 active:scale-95 transition px-4 py-2 rounded-xl flex items-center gap-2 text-sm font-medium\">\n <span id=\"cameraStatusIcon\">\ud83d\udd34<\/span>\n <span id=\"cameraStatusText\">\u0e42\u0e2b\u0e25\u0e14 AR...<\/span>\n <\/button>\n <button id=\"btnRestart\" class=\"glass-panel hover:bg-red-600\/30 active:scale-95 transition px-4 py-2 rounded-xl text-sm font-medium\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"inGameMascotContainer\" class=\"absolute top-[45%] left-4 md:left-8 -translate-y-1\/2 opacity-0 transition-opacity duration-500 pointer-events-none flex flex-col items-start z-10\">\n \n <div id=\"mascotBubble\" class=\"bg-white text-[#00205B] border-[#FBBF24] border-2 text-xs md:text-sm font-bold px-4 py-2 rounded-2xl rounded-bl-none shadow-lg mb-2 opacity-0 transition-all duration-300 transform translate-y-2 max-w-[150px] whitespace-pre-wrap leading-tight\">\n \u0e0a\u0e48\u0e27\u0e22\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e19\u0e30!\n <\/div>\n \n <div class=\"w-[80px] md:w-[100px] animate-[bounce_4s_infinite]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-full drop-shadow-[0_8px_10px_rgba(0,0,0,0.5)] origin-bottom\">\n \n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"30\" cy=\"110\" r=\"12\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <rect x=\"75\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"110\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <path d=\"M 65 230 Q 80 220 95 230 L 90 240 L 65 240 Z\" fill=\"#00205B\"\/>\n <path d=\"M 105 230 Q 120 220 135 230 L 135 240 L 110 240 Z\" fill=\"#00205B\"\/>\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n \n <circle cx=\"100\" cy=\"165\" r=\"16\" fill=\"#FBBF24\"\/>\n <circle cx=\"100\" cy=\"165\" r=\"12\" fill=\"#00205B\"\/>\n <text x=\"100\" y=\"172\" fill=\"#FFFFFF\" font-family=\"Arial, sans-serif\" font-weight=\"900\" font-size=\"18\" text-anchor=\"middle\">N<\/text>\n <rect x=\"70\" y=\"185\" width=\"60\" height=\"12\" rx=\"3\" fill=\"#00205B\"\/>\n <rect x=\"75\" y=\"187\" width=\"50\" height=\"2\" fill=\"#FFFFFF\" opacity=\"0.6\"\/>\n <rect x=\"80\" y=\"191\" width=\"40\" height=\"2\" fill=\"#FBBF24\" opacity=\"0.8\"\/>\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlowInGame)\" opacity=\"0.5\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"70\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlowInGame)\" opacity=\"0.5\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"120\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 90 105 Q 100 118 110 105\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n \n <defs>\n <radialGradient id=\"pinkGlowInGame\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stop-color=\"#EC297B\"\/>\n <stop offset=\"100%\" stop-color=\"#00E5FF\" stop-opacity=\"0\"\/>\n <\/radialGradient>\n <\/defs>\n <\/svg>\n <\/div>\n <\/div>\n\n \n <footer id=\"gameFooter\" class=\"w-full flex justify-center opacity-0 transition-opacity duration-500\">\n <div id=\"arStatusIndicator\" class=\"glass-panel-dark text-white\/90 text-sm px-6 py-2.5 rounded-full flex items-center gap-2 border border-white\/10 animate-pulse\">\n <span class=\"w-2.5 h-2.5 rounded-full bg-yellow-400\"><\/span>\n <span id=\"arStatusText\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07...<\/span>\n <\/div>\n <\/footer>\n <\/div>\n\n \n <div id=\"welcomeScreen\" class=\"absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/80 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-lg w-full rounded-3xl p-8 text-center flex flex-col items-center border border-white\/20 shadow-2xl\">\n \n <div class=\"mb-8 flex items-center justify-center gap-4 w-full max-w-[380px] drop-shadow-[0_0_20px_rgba(255,255,255,0.45)]\">\n \n <svg class=\"w-[75px] h-[75px] shrink-0\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n \n <path d=\"M 12 28 L 12 83 Q 27 93 42 83 L 42 28 Q 27 38 12 28 Z\" fill=\"#FBBF24\"\/>\n \n <path d=\"M 18 20 L 18 75 Q 33 85 48 75 L 48 20 Q 33 30 18 20 Z\" fill=\"#FFFFFF\"\/>\n \n <path d=\"M 88 28 L 88 83 Q 73 93 58 83 L 58 28 Q 73 38 88 28 Z\" fill=\"#10B981\"\/>\n \n <path d=\"M 82 20 L 82 75 Q 67 85 52 75 L 52 20 Q 67 30 82 20 Z\" fill=\"#EC297B\"\/>\n <\/svg>\n \n <div class=\"flex flex-col justify-center text-left font-sans mt-1\">\n <span class=\"text-[44px] leading-[0.85] font-black text-white tracking-[-0.03em]\">NRRU<\/span>\n <span class=\"text-[32px] leading-[0.95] font-extrabold text-[#EC297B] tracking-[-0.01em] mt-1\">LIBRARY<\/span>\n <\/div>\n <\/div>\n \n <h2 class=\"text-xl text-green-300 font-extrabold tracking-wide mb-1\">\n AR Waste Sorting Game\n <\/h2>\n <h3 class=\"text-sm text-emerald-100\/90 font-medium tracking-wide mb-6\">\n \u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01 \u0e0a\u0e48\u0e27\u0e22\u0e23\u0e31\u0e01\u0e29\u0e32\u0e42\u0e25\u0e01\u0e19\u0e35\u0e49\u0e44\u0e27\u0e49\u0e44\u0e14\u0e49\n <\/h3>\n \n \n <div class=\"flex flex-row items-center gap-4 mb-8 bg-white\/5 rounded-2xl p-4 border border-white\/10 relative w-full max-w-[400px]\">\n \n <div class=\"shrink-0 animate-[bounce_3s_infinite]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-[90px] drop-shadow-[0_8px_10px_rgba(0,0,0,0.5)] origin-bottom\">\n \n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 60 160 Q 30 140 30 110\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"30\" cy=\"110\" r=\"12\" fill=\"#FFFFFF\"\/>\n\n \n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 160 200\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n\n \n <rect x=\"75\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"110\" y=\"200\" width=\"16\" height=\"30\" rx=\"5\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <path d=\"M 65 230 Q 80 220 95 230 L 90 240 L 65 240 Z\" fill=\"#00205B\"\/>\n <path d=\"M 105 230 Q 120 220 135 230 L 135 240 L 110 240 Z\" fill=\"#00205B\"\/>\n\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n \n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n\n \n <circle cx=\"100\" cy=\"165\" r=\"16\" fill=\"#FBBF24\"\/>\n <circle cx=\"100\" cy=\"165\" r=\"12\" fill=\"#00205B\"\/>\n <text x=\"100\" y=\"172\" fill=\"#FFFFFF\" font-family=\"Arial, sans-serif\" font-weight=\"900\" font-size=\"18\" text-anchor=\"middle\">N<\/text>\n \n \n <rect x=\"70\" y=\"185\" width=\"60\" height=\"12\" rx=\"3\" fill=\"#00205B\"\/>\n <rect x=\"75\" y=\"187\" width=\"50\" height=\"2\" fill=\"#FFFFFF\" opacity=\"0.6\"\/>\n <rect x=\"80\" y=\"191\" width=\"40\" height=\"2\" fill=\"#FBBF24\" opacity=\"0.8\"\/>\n\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n \n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n \n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlow)\" opacity=\"0.5\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"70\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"url(#pinkGlow)\" opacity=\"0.5\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"120\" cy=\"92\" r=\"3\" fill=\"#FFFFFF\"\/>\n\n \n <path d=\"M 90 105 Q 100 118 110 105\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n\n \n <defs>\n <radialGradient id=\"pinkGlow\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n <stop offset=\"0%\" stop-color=\"#EC297B\"\/>\n <stop offset=\"100%\" stop-color=\"#00E5FF\" stop-opacity=\"0\"\/>\n <\/radialGradient>\n <\/defs>\n <\/svg>\n <\/div>\n \n <div class=\"text-left flex-1\">\n <h3 class=\"text-green-300 font-bold mb-1 text-sm flex items-center gap-1.5\">\n <span class=\"text-yellow-400 text-base\">\u2728<\/span> \u0e19\u0e49\u0e2d\u0e07\u0e1a\u0e38\u0e4a\u0e04\u0e1a\u0e2d\u0e17 (BookBot)\n <\/h3>\n <p class=\"text-slate-200 text-xs leading-relaxed\">\n \u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35\u0e04\u0e23\u0e31\u0e1a! \u0e21\u0e32\u0e23\u0e48\u0e27\u0e21\u0e2a\u0e19\u0e38\u0e01\u0e01\u0e31\u0e1a\u0e27\u0e34\u0e18\u0e35\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2a\u0e39\u0e48\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\u0e14\u0e49\u0e27\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 <strong>AR Hand Tracking<\/strong> \u0e0a\u0e39\u0e21\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e49\u0e27\u0e21\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22\u0e04\u0e23\u0e31\u0e1a!\n <\/p>\n <\/div>\n <\/div>\n\n <button id=\"btnEnterGame\" class=\"w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-95 transition-transform duration-200 py-4 px-6 rounded-2xl font-bold text-lg shadow-lg shadow-green-500\/20 pointer-events-auto\">\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e40\u0e01\u0e21\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"instructionsScreen\" class=\"hidden absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/80 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-xl w-full rounded-3xl p-8 text-center border border-white\/20 shadow-2xl\">\n <h2 class=\"text-2xl font-bold mb-6 text-green-300\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01<\/h2>\n \n \n <div class=\"grid grid-cols-2 gap-4 mb-8\">\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc4b<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e0a\u0e39\u0e21\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e2b\u0e31\u0e19\u0e1d\u0e48\u0e32\u0e21\u0e37\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e2b\u0e32\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49 AI \u0e15\u0e23\u0e27\u0e08\u0e08\u0e31\u0e1a\u0e44\u0e14\u0e49\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc46<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e15\u0e31\u0e27\u0e0a\u0e35\u0e49<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e1b\u0e25\u0e32\u0e22\u0e19\u0e34\u0e49\u0e27\u0e0a\u0e35\u0e49\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e04\u0e37\u0e2d\u0e15\u0e31\u0e27\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e02\u0e22\u0e30\u0e1a\u0e19\u0e08\u0e2d<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83d\udc4c<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e08\u0e35\u0e1a\u0e19\u0e34\u0e49\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e35\u0e1a<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e43\u0e0a\u0e49\u0e19\u0e34\u0e49\u0e27\u0e42\u0e1b\u0e49\u0e07\u0e41\u0e25\u0e30\u0e19\u0e34\u0e49\u0e27\u0e0a\u0e35\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e1a\u0e01\u0e31\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e22\u0e34\u0e1a\u0e08\u0e31\u0e1a\u0e27\u0e31\u0e15\u0e16\u0e38\u0e02\u0e22\u0e30<\/p>\n <\/div>\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-4 flex flex-col items-center\">\n <span class=\"text-3xl mb-2\">\ud83e\udd1a<\/span>\n <h3 class=\"text-sm font-semibold text-green-300 mb-1\">\u0e01\u0e32\u0e07\u0e19\u0e34\u0e49\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e25\u0e48\u0e2d\u0e22<\/h3>\n <p class=\"text-xs text-slate-300\">\u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e21\u0e37\u0e2d\u0e2d\u0e2d\u0e01\u0e2b\u0e48\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e22\u0e19\u0e02\u0e22\u0e30\u0e25\u0e07\u0e16\u0e31\u0e07\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-amber-500\/10 border border-amber-500\/20 rounded-xl p-3 mb-6 text-xs text-amber-300 flex items-center gap-2 justify-center\">\n <span>\u2139\ufe0f<\/span>\n <span>\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 <strong>\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19<\/strong> \u0e25\u0e32\u0e01\u0e42\u0e22\u0e19\u0e02\u0e22\u0e30\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35!<\/span>\n <\/div>\n\n <button id=\"btnStartGame\" class=\"w-full bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 active:scale-95 transition py-4 px-6 rounded-2xl font-bold text-lg shadow-lg pointer-events-auto\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e40\u0e25\u0e22!\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"gameOverScreen\" class=\"hidden absolute inset-0 z-30 flex flex-col items-center justify-center bg-slate-950\/90 p-6 transition-opacity duration-500\">\n <div class=\"glass-panel max-w-md w-full rounded-3xl p-8 text-center border border-white\/20 shadow-2xl pointer-events-auto\">\n <span class=\"text-5xl mb-4 block animate-bounce\">\ud83c\udfc6<\/span>\n <h2 class=\"text-3xl font-extrabold text-green-300 mb-1\">\u0e2a\u0e23\u0e38\u0e1b\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49<\/h2>\n <p class=\"text-emerald-100\/70 text-sm mb-6\">\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e23\u0e31\u0e01\u0e29\u0e32\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27 NRRU \u0e44\u0e14\u0e49\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!<\/p>\n\n <div class=\"bg-white\/5 border border-white\/10 rounded-2xl p-5 mb-6 space-y-3 text-left\">\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e04\u0e30\u0e41\u0e19\u0e19\u0e2a\u0e30\u0e2a\u0e21\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14<\/span>\n <span id=\"finalScore\" class=\"text-xl font-bold text-green-400\">0<\/span>\n <\/div>\n <div class=\"h-[1px] bg-white\/10\"><\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e15\u0e2d\u0e1a\u0e16\u0e39\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n <span id=\"finalCorrect\" class=\"font-semibold text-emerald-300\">0 \/ 10<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e15\u0e2d\u0e1a\u0e1c\u0e34\u0e14<\/span>\n <span id=\"finalWrong\" class=\"font-semibold text-red-300\">0<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <span class=\"text-slate-300\">\u0e40\u0e1b\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e47\u0e19\u0e15\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33<\/span>\n <span id=\"finalAccuracy\" class=\"font-semibold text-yellow-300\">0%<\/span>\n <\/div>\n <\/div>\n\n \n <button id=\"btnPlayAgain\" class=\"w-full bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-95 transition py-4 px-6 rounded-2xl font-bold text-lg shadow-lg pointer-events-auto\">\n \u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e25\u0e48\u0e19\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"explanationModal\" class=\"hidden absolute inset-0 z-30 flex items-center justify-center bg-slate-950\/85 p-6 pointer-events-auto transition-opacity duration-300\">\n <div class=\"glass-panel max-w-md w-full rounded-3xl p-6 pt-12 text-center border border-red-500\/30 shadow-2xl flex flex-col items-center relative mt-10\">\n \n \n <div class=\"absolute -top-16 left-1\/2 -translate-x-1\/2 w-[100px]\">\n <svg viewBox=\"0 0 200 240\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-full drop-shadow-[0_8px_10px_rgba(0,0,0,0.4)]\">\n \n <path d=\"M 140 160 Q 170 170 140 210\" stroke=\"#FFFFFF\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n <path d=\"M 140 160 Q 170 170 140 210\" stroke=\"#00205B\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n \n <path d=\"M 65 140 L 135 140 L 145 205 L 55 205 Z\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"5\" stroke-linejoin=\"round\"\/>\n <path d=\"M 70 145 L 130 145 L 138 200 L 62 200 Z\" fill=\"none\" stroke=\"#FBBF24\" stroke-width=\"4\"\/>\n \n <rect x=\"90\" y=\"130\" width=\"20\" height=\"15\" fill=\"#00205B\"\/>\n \n <path d=\"M 85 30 L 115 30\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n <circle cx=\"70\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <circle cx=\"130\" cy=\"30\" r=\"16\" stroke=\"#FBBF24\" stroke-width=\"5\" fill=\"none\"\/>\n <path d=\"M 70 46 L 80 60 M 130 46 L 120 60\" stroke=\"#FBBF24\" stroke-width=\"5\"\/>\n \n <rect x=\"30\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n <rect x=\"150\" y=\"80\" width=\"20\" height=\"40\" rx=\"10\" fill=\"#FBBF24\" stroke=\"#00205B\" stroke-width=\"4\"\/>\n \n <rect x=\"40\" y=\"50\" width=\"120\" height=\"90\" rx=\"35\" fill=\"#FFFFFF\" stroke=\"#00205B\" stroke-width=\"6\"\/>\n <rect x=\"52\" y=\"62\" width=\"96\" height=\"66\" rx=\"22\" fill=\"#0F172A\"\/>\n \n <circle cx=\"75\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"78\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n <circle cx=\"125\" cy=\"85\" r=\"16\" fill=\"#00E5FF\"\/>\n <circle cx=\"128\" cy=\"80\" r=\"6\" fill=\"#FFFFFF\"\/>\n \n <circle cx=\"100\" cy=\"110\" r=\"5\" fill=\"#EC297B\" stroke=\"#FFFFFF\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n\n <h3 class=\"text-2xl font-bold text-red-400 mb-1\">\u0e22\u0e31\u0e07\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e19\u0e30!<\/h3>\n <p class=\"text-slate-300 text-xs mb-3\">\u0e19\u0e49\u0e2d\u0e07\u0e1a\u0e38\u0e4a\u0e04\u0e1a\u0e2d\u0e17\u0e2d\u0e22\u0e32\u0e01\u0e41\u0e19\u0e30\u0e19\u0e33\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e02\u0e2d\u0e07\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/p>\n \n \n <div class=\"flex items-center gap-4 bg-white\/5 border border-white\/10 rounded-2xl px-5 py-3 my-2 w-full justify-center\">\n <canvas id=\"modalTrashCanvas\" width=\"90\" height=\"90\" class=\"drop-shadow-md bg-white\/5 rounded-full\"><\/canvas>\n <div class=\"text-left\">\n <div id=\"expTrashName\" class=\"font-extrabold text-xl text-white\">\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01<\/div>\n <div class=\"text-sm text-slate-300 mt-0.5\">\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07: <span id=\"expCorrectBin\" class=\"font-bold\">\u0e02\u0e22\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25<\/span><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-slate-900\/60 border border-white\/5 rounded-2xl p-4 my-3 text-sm text-slate-300 text-left leading-relaxed w-full shadow-inner\">\n <p class=\"font-semibold text-green-300 mb-1.5 flex items-center gap-1.5\">\n <span>\ud83c\udf31<\/span> \u0e40\u0e01\u0e23\u0e47\u0e14\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01:\n <\/p>\n <p id=\"expDetail\" class=\"text-slate-200\">\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e19\u0e35\u0e49\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48...<\/p>\n <\/div>\n \n <button id=\"btnDismissExplanation\" class=\"w-full mt-2 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-emerald-700 active:scale-95 transition-transform duration-200 py-3.5 px-6 rounded-2xl font-bold text-md shadow-lg shadow-green-500\/25 pointer-events-auto\">\n \u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e49\u0e27 \u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e02\u0e49\u0e2d\u0e16\u0e31\u0e14\u0e44\u0e1b \ud83d\ude80\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e02\u0e22\u0e30 16 \u0e0a\u0e34\u0e49\u0e19 \n const TRASH_ITEMS = [\n { id: 1, name: \"\u0e02\u0e27\u0e14\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\", emoji: \"\ud83d\udca7\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e17\u0e33\u0e21\u0e32\u0e08\u0e32\u0e01\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01 PET \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e43\u0e2a \u0e41\u0e02\u0e47\u0e07\u0e41\u0e23\u0e07\u0e41\u0e25\u0e30\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19\u0e2a\u0e39\u0e07 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e2b\u0e25\u0e2d\u0e21\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e21\u0e47\u0e14\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e22\u0e2a\u0e31\u0e07\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c \u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e14\u0e37\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e44\u0e21\u0e48\u0e08\u0e33\u0e01\u0e31\u0e14\u0e23\u0e2d\u0e1a\" },\n { id: 2, name: \"\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e25\u0e31\u0e07\", emoji: \"\ud83d\udce6\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e17\u0e35\u0e48\u0e17\u0e33\u0e21\u0e32\u0e08\u0e32\u0e01\u0e40\u0e22\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e49\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e21\u0e35\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e22\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e17\u0e35\u0e48\u0e41\u0e02\u0e47\u0e07\u0e41\u0e01\u0e23\u0e48\u0e07 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e21\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e34\u0e48\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e02\u0e49\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e31\u0e48\u0e19\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e22\u0e37\u0e48\u0e2d\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e25\u0e39\u0e01\u0e1f\u0e39\u0e01\u0e41\u0e25\u0e30\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e40\u0e02\u0e35\u0e22\u0e19\u0e43\u0e2b\u0e21\u0e48\" },\n { id: 3, name: \"\u0e40\u0e28\u0e29\u0e2d\u0e32\u0e2b\u0e32\u0e23\", emoji: \"\ud83c\udf72\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e37\u0e49\u0e19\u0e2a\u0e39\u0e07\u0e41\u0e25\u0e30\u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e2b\u0e32\u0e01\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e02\u0e22\u0e30\u0e41\u0e2b\u0e49\u0e07 \u0e08\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e17\u0e33\u0e1b\u0e38\u0e4b\u0e22\u0e2b\u0e21\u0e31\u0e01 \u0e19\u0e49\u0e33\u0e2b\u0e21\u0e31\u0e01\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e \u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e4a\u0e32\u0e0b\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e34\u0e15\u0e23\u0e15\u0e48\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e44\u0e14\u0e49\u0e14\u0e35\" },\n { id: 4, name: \"\u0e40\u0e1b\u0e25\u0e37\u0e2d\u0e01\u0e01\u0e25\u0e49\u0e27\u0e22\", emoji: \"\ud83c\udf4c\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e2a\u0e32\u0e23\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c \u0e41\u0e23\u0e48\u0e18\u0e32\u0e15\u0e38\u0e42\u0e1e\u0e41\u0e17\u0e2a\u0e40\u0e0b\u0e35\u0e22\u0e21 \u0e41\u0e25\u0e30\u0e1f\u0e2d\u0e2a\u0e1f\u0e2d\u0e23\u0e31\u0e2a\u0e2a\u0e39\u0e07\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e44\u0e14\u0e49\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e44\u0e1b\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e38\u0e4b\u0e22\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e23\u0e32\u0e01\u0e41\u0e25\u0e30\u0e1e\u0e37\u0e0a\u0e1c\u0e31\u0e01\u0e2a\u0e27\u0e19\u0e04\u0e23\u0e31\u0e27\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e40\u0e04\u0e21\u0e35\" },\n { id: 5, name: \"\u0e2b\u0e25\u0e2d\u0e14\u0e44\u0e1f\u0e40\u0e01\u0e48\u0e32\", emoji: \"\ud83d\udca1\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2b\u0e25\u0e2d\u0e14\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e02\u0e2d\u0e07\u0e44\u0e2d\u0e1b\u0e23\u0e2d\u0e17\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e40\u0e23\u0e37\u0e2d\u0e07\u0e41\u0e2a\u0e07\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29\u0e23\u0e49\u0e32\u0e22\u0e41\u0e23\u0e07 \u0e2b\u0e32\u0e01\u0e41\u0e15\u0e01\u0e2b\u0e31\u0e01\u0e08\u0e30\u0e1b\u0e19\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e2a\u0e39\u0e48\u0e2d\u0e32\u0e01\u0e32\u0e28\u0e41\u0e25\u0e30\u0e1c\u0e34\u0e27\u0e2b\u0e19\u0e31\u0e07 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e43\u0e2a\u0e48\u0e16\u0e31\u0e07\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1d\u0e31\u0e07\u0e01\u0e25\u0e1a\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e33\u0e08\u0e31\u0e14\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e17\u0e32\u0e07\" },\n { id: 6, name: \"\u0e16\u0e48\u0e32\u0e19\u0e44\u0e1f\u0e09\u0e32\u0e22\", emoji: \"\ud83d\udd0b\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e21\u0e35\u0e2a\u0e32\u0e23\u0e42\u0e25\u0e2b\u0e30\u0e2b\u0e19\u0e31\u0e01\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29\u0e2a\u0e39\u0e07\u0e2a\u0e30\u0e2a\u0e21\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e40\u0e0a\u0e48\u0e19 \u0e41\u0e04\u0e14\u0e40\u0e21\u0e35\u0e22\u0e21 \u0e15\u0e30\u0e01\u0e31\u0e48\u0e27 \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e2d\u0e17 \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e17\u0e34\u0e49\u0e07\u0e1b\u0e19\u0e01\u0e31\u0e1a\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e41\u0e25\u0e30\u0e40\u0e01\u0e34\u0e14\u0e01\u0e32\u0e23\u0e0a\u0e33\u0e23\u0e38\u0e14 \u0e2a\u0e32\u0e23\u0e1e\u0e34\u0e29\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e08\u0e30\u0e23\u0e31\u0e48\u0e27\u0e0b\u0e36\u0e21\u0e25\u0e07\u0e2a\u0e39\u0e48\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e19\u0e49\u0e33\u0e43\u0e15\u0e49\u0e14\u0e34\u0e19\u0e41\u0e25\u0e30\u0e2b\u0e48\u0e27\u0e07\u0e42\u0e0b\u0e48\u0e2d\u0e32\u0e2b\u0e32\u0e23\" },\n { id: 7, name: \"\u0e0b\u0e2d\u0e07\u0e02\u0e19\u0e21\", emoji: \"\ud83c\udf6c\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e1f\u0e34\u0e25\u0e4c\u0e21\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01\u0e1b\u0e23\u0e30\u0e01\u0e1a\u0e01\u0e31\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e0a\u0e31\u0e49\u0e19\u0e41\u0e25\u0e30\u0e40\u0e04\u0e25\u0e37\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e1f\u0e2d\u0e22\u0e25\u0e4c\u0e42\u0e25\u0e2b\u0e30 (Laminate) \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49 \u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e04\u0e38\u0e49\u0e21\u0e17\u0e38\u0e19 \u0e08\u0e36\u0e07\u0e08\u0e31\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e1c\u0e32\u0e40\u0e0a\u0e34\u0e07\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19\" },\n { id: 8, name: \"\u0e2b\u0e19\u0e49\u0e32\u0e01\u0e32\u0e01\u0e2d\u0e19\u0e32\u0e21\u0e31\u0e22\", emoji: \"\ud83d\ude37\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e22\u0e2a\u0e31\u0e07\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e22\u0e32\u0e01 \u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e04\u0e25\u0e17\u0e35\u0e48\u0e21\u0e35\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e1b\u0e19\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e40\u0e0a\u0e37\u0e49\u0e2d\u0e42\u0e23\u0e04\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e04\u0e31\u0e14\u0e2b\u0e25\u0e31\u0e48\u0e07 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e1a\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e21\u0e34\u0e14\u0e0a\u0e34\u0e14\u0e41\u0e25\u0e49\u0e27\u0e17\u0e34\u0e49\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e44\u0e1b\u0e40\u0e1c\u0e32\u0e17\u0e33\u0e25\u0e32\u0e22\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\" },\n { id: 9, name: \"\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e19\u0e49\u0e33\", emoji: \"\ud83e\udd6b\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e23\u0e48\u0e42\u0e25\u0e2b\u0e30\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e48\u0e32\u0e2a\u0e39\u0e07\u0e41\u0e25\u0e30\u0e04\u0e07\u0e17\u0e19 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e44\u0e1b\u0e1c\u0e48\u0e32\u0e19\u0e04\u0e27\u0e32\u0e21\u0e23\u0e49\u0e2d\u0e19\u0e2d\u0e38\u0e13\u0e2b\u0e20\u0e39\u0e21\u0e34\u0e2a\u0e39\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e25\u0e2d\u0e21\u0e41\u0e25\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e19\u0e49\u0e33\u0e2d\u0e31\u0e14\u0e25\u0e21\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e22\u0e46 \u0e42\u0e14\u0e22\u0e0a\u0e48\u0e27\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14\u0e1e\u0e25\u0e31\u0e07\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e16\u0e36\u0e07 95% \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e31\u0e1a\u0e1c\u0e25\u0e34\u0e15\u0e43\u0e2b\u0e21\u0e48\" },\n { id: 10, name: \"\u0e41\u0e01\u0e49\u0e27\u0e19\u0e49\u0e33\u0e0a\u0e33\u0e23\u0e38\u0e14\", emoji: \"\ud83e\udd5b\", type: \"recycle\", color: \"#EAB308\", explanation: \"\u0e27\u0e31\u0e2a\u0e14\u0e38\u0e41\u0e01\u0e49\u0e27\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e2b\u0e25\u0e2d\u0e21\u0e17\u0e23\u0e32\u0e22\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2b\u0e25\u0e2d\u0e21\u0e43\u0e2b\u0e21\u0e48\u0e44\u0e14\u0e49\u0e44\u0e21\u0e48\u0e21\u0e35\u0e08\u0e33\u0e01\u0e31\u0e14\u0e23\u0e2d\u0e1a \u0e41\u0e15\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e23\u0e30\u0e21\u0e31\u0e14\u0e23\u0e30\u0e27\u0e31\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e1a\u0e32\u0e14\u0e1c\u0e39\u0e49\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\" },\n { id: 11, name: \"\u0e40\u0e28\u0e29\u0e1c\u0e31\u0e01\", emoji: \"\ud83e\udd6c\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e28\u0e29\u0e0b\u0e32\u0e01\u0e1e\u0e37\u0e0a\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e27\u0e25\u0e2a\u0e32\u0e23\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e08\u0e32\u0e01\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34\u0e23\u0e49\u0e2d\u0e22\u0e40\u0e1b\u0e2d\u0e23\u0e4c\u0e40\u0e0b\u0e47\u0e19\u0e15\u0e4c \u0e21\u0e35\u0e08\u0e38\u0e25\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e34\u0e48\u0e07\u0e43\u0e19\u0e01\u0e32\u0e23\u0e19\u0e33\u0e44\u0e1b\u0e2b\u0e21\u0e31\u0e01\u0e17\u0e33\u0e19\u0e49\u0e33\u0e0a\u0e35\u0e27\u0e20\u0e32\u0e1e\u0e2d\u0e35\u0e40\u0e2d\u0e47\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e38\u0e4b\u0e22\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e14\u0e34\u0e19\u0e43\u0e2b\u0e49\u0e23\u0e48\u0e27\u0e19\u0e0b\u0e38\u0e22\" },\n { id: 12, name: \"\u0e01\u0e32\u0e01\u0e01\u0e32\u0e41\u0e1f\", emoji: \"\u2615\", type: \"wet\", color: \"#16A34A\", explanation: \"\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e01\u0e40\u0e21\u0e25\u0e47\u0e14\u0e1e\u0e37\u0e0a\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c \u0e21\u0e35\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e40\u0e14\u0e48\u0e19\u0e04\u0e37\u0e2d\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e2b\u0e25\u0e48\u0e07\u0e44\u0e19\u0e42\u0e15\u0e23\u0e40\u0e08\u0e19\u0e2a\u0e39\u0e07\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 \u0e0a\u0e48\u0e27\u0e22\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e14\u0e34\u0e19 \u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e20\u0e32\u0e1e\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e14\u0e14\u0e48\u0e32\u0e07 \u0e41\u0e25\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e02\u0e31\u0e1a\u0e44\u0e25\u0e48\u0e41\u0e21\u0e25\u0e07\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e1a\u0e32\u0e07\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e34\u0e15\u0e23\u0e15\u0e48\u0e2d\u0e42\u0e25\u0e01\" },\n { id: 13, name: \"\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e2a\u0e40\u0e1b\u0e23\u0e22\u0e4c\", emoji: \"\ud83d\udd8d\ufe0f\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e20\u0e32\u0e22\u0e43\u0e19\u0e01\u0e23\u0e30\u0e1b\u0e4b\u0e2d\u0e07\u0e22\u0e31\u0e07\u0e04\u0e07\u0e21\u0e35\u0e41\u0e23\u0e07\u0e14\u0e31\u0e19\u0e41\u0e01\u0e4a\u0e2a\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e23\u0e25\u0e30\u0e25\u0e32\u0e22\u0e40\u0e04\u0e21\u0e35\u0e2b\u0e25\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e2d\u0e22\u0e39\u0e48 \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e41\u0e23\u0e07\u0e01\u0e23\u0e30\u0e41\u0e17\u0e01\u0e2b\u0e23\u0e37\u0e2d\u0e42\u0e14\u0e19\u0e04\u0e27\u0e32\u0e21\u0e23\u0e49\u0e2d\u0e19\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e08\u0e40\u0e01\u0e34\u0e14\u0e01\u0e32\u0e23\u0e23\u0e30\u0e40\u0e1a\u0e34\u0e14\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e01\u0e34\u0e14\u0e40\u0e1e\u0e25\u0e34\u0e07\u0e44\u0e2b\u0e21\u0e49\u0e44\u0e14\u0e49 \u0e08\u0e36\u0e07\u0e2b\u0e49\u0e32\u0e21\u0e17\u0e34\u0e49\u0e07\u0e1b\u0e30\u0e1b\u0e19\u0e01\u0e31\u0e1a\u0e02\u0e22\u0e30\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2d\u0e37\u0e48\u0e19\u0e40\u0e14\u0e47\u0e14\u0e02\u0e32\u0e14\" },\n { id: 14, name: \"\u0e19\u0e49\u0e33\u0e22\u0e32\u0e0b\u0e31\u0e01\u0e25\u0e49\u0e32\u0e07\", emoji: \"\ud83e\uddf4\", type: \"hazardous\", color: \"#EF4444\", explanation: \"\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e1c\u0e2a\u0e21\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e23\u0e40\u0e04\u0e21\u0e35\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e2a\u0e21\u0e1a\u0e31\u0e15\u0e34\u0e01\u0e31\u0e14\u0e01\u0e23\u0e48\u0e2d\u0e19 \u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e34\u0e29 \u0e41\u0e25\u0e30\u0e17\u0e33\u0e1b\u0e0f\u0e34\u0e01\u0e34\u0e23\u0e34\u0e22\u0e32\u0e01\u0e31\u0e1a\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e1a\u0e23\u0e23\u0e08\u0e38\u0e43\u0e19\u0e20\u0e32\u0e0a\u0e19\u0e30\u0e17\u0e35\u0e48\u0e1b\u0e34\u0e14\u0e41\u0e19\u0e48\u0e19\u0e41\u0e25\u0e30\u0e04\u0e31\u0e14\u0e41\u0e22\u0e01\u0e43\u0e2b\u0e49\u0e17\u0e32\u0e07\u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25\u0e19\u0e33\u0e44\u0e1b\u0e1a\u0e33\u0e1a\u0e31\u0e14\u0e14\u0e49\u0e27\u0e22\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e40\u0e04\u0e21\u0e35\" },\n { id: 15, name: \"\u0e16\u0e38\u0e07\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e41\u0e01\u0e07\", emoji: \"\ud83d\udecd\ufe0f\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e41\u0e21\u0e49\u0e08\u0e30\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e1e\u0e25\u0e32\u0e2a\u0e15\u0e34\u0e01 \u0e41\u0e15\u0e48\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\u0e04\u0e23\u0e32\u0e1a\u0e19\u0e49\u0e33\u0e21\u0e31\u0e19 \u0e04\u0e23\u0e32\u0e1a\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e01\u0e07 \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e1b\u0e0f\u0e34\u0e01\u0e39\u0e25\u0e2a\u0e01\u0e1b\u0e23\u0e01\u0e1b\u0e23\u0e34\u0e21\u0e32\u0e13\u0e21\u0e32\u0e01 \u0e08\u0e36\u0e07\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e2d\u0e32\u0e14\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49\u0e22\u0e32\u0e01\u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e17\u0e32\u0e07\u0e40\u0e28\u0e23\u0e29\u0e10\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e34\u0e49\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\" },\n { id: 16, name: \"\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e42\u0e1f\u0e21\u0e40\u0e1b\u0e37\u0e49\u0e2d\u0e19\", emoji: \"\ud83e\udd61\", type: \"general\", color: \"#3B82F6\", explanation: \"\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e42\u0e1f\u0e21\u0e1c\u0e25\u0e34\u0e15\u0e08\u0e32\u0e01\u0e42\u0e1e\u0e25\u0e35\u0e2a\u0e44\u0e15\u0e23\u0e35\u0e19\u0e02\u0e22\u0e32\u0e22\u0e15\u0e31\u0e27 (EPS) \u0e22\u0e48\u0e2d\u0e22\u0e2a\u0e25\u0e32\u0e22\u0e22\u0e32\u0e01\u0e21\u0e32\u0e01\u0e15\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e0a\u0e32\u0e15\u0e34 (\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 500 \u0e1b\u0e35) \u0e22\u0e34\u0e48\u0e07\u0e21\u0e35\u0e04\u0e23\u0e32\u0e1a\u0e19\u0e49\u0e33\u0e21\u0e31\u0e19\u0e2a\u0e01\u0e1b\u0e23\u0e01\u0e08\u0e30\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\u0e44\u0e14\u0e49\u0e2d\u0e35\u0e01 \u0e08\u0e36\u0e07\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\" }\n ];\n\n \/\/ \u0e16\u0e31\u0e07\u0e02\u0e22\u0e30 4 \u0e2a\u0e35\n const BIN_TYPES = [\n { id: \"hazardous\", name: \"\u0e02\u0e22\u0e30\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\", color: \"#EF4444\", darkColor: \"#B91C1C\", logoType: \"\u2620\ufe0f\" },\n { id: \"wet\", name: \"\u0e02\u0e22\u0e30\u0e2d\u0e34\u0e19\u0e17\u0e23\u0e35\u0e22\u0e4c\", color: \"#16A34A\", darkColor: \"#15803D\", logoType: \"\ud83c\udf42\" },\n { id: \"recycle\", name: \"\u0e02\u0e22\u0e30\u0e23\u0e35\u0e44\u0e0b\u0e40\u0e04\u0e34\u0e25\", color: \"#FBBF24\", darkColor: \"#D97706\", logoType: \"\u267b\ufe0f\" },\n { id: \"general\", name: \"\u0e02\u0e22\u0e30\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\", color: \"#3B82F6\", darkColor: \"#1D4ED8\", logoType: \"\ud83d\uddd1\ufe0f\" }\n ];\n\n \/\/ --- \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e01\u0e21\u0e41\u0e25\u0e30\u0e01\u0e25\u0e49\u0e2d\u0e07 ---\n const canvas = document.getElementById('gameCanvas');\n const ctx = canvas.getContext('2d');\n const videoElement = document.getElementById('webcam');\n \n let dpr = window.devicePixelRatio || 1;\n let width = window.innerWidth;\n let height = window.innerHeight;\n\n let gameState = 'welcome'; \n let score = 0;\n let statCorrect = 0;\n let statWrong = 0;\n let currentQuestionIndex = 0;\n let gamePlaylist = []; \n const MAX_QUESTIONS = 10; \/\/ \u0e08\u0e33\u0e01\u0e31\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e48\u0e19\u0e41\u0e04\u0e48 10 \u0e02\u0e49\u0e2d\u0e15\u0e48\u0e2d\u0e40\u0e01\u0e21\n let currentTrash = null; \n let feedbackMessage = null; \n \n let particles = [];\n let bins = []; \n \n let trackingActive = false; \n let cameraEnabled = false; \n let isCameraInitializing = false;\n let handData = null; \n let handsDetector = null;\n let cameraHelper = null;\n\n let currentLibraryScene = 0; \n\n let pointer = {\n x: width \/ 2, y: height \/ 2,\n isPinching: false, grabbedItem: null,\n targetHovered: false, pinchState: 'normal', \n lastX: width \/ 2, lastY: height \/ 2\n };\n\n let isMouseDown = false;\n let mouseX = width \/ 2;\n let mouseY = height \/ 2;\n\n let trashAnimation = { scale: 1, bounce: 0, rotation: 0 };\n let wasPinching = false;\n\n let mascotMessageTimeout;\n\n \/\/ --- \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e08\u0e31\u0e14\u0e02\u0e19\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d ---\n function resizeCanvas() {\n width = window.innerWidth;\n height = window.innerHeight;\n \n canvas.width = width * dpr;\n canvas.height = height * dpr;\n ctx.scale(dpr, dpr);\n\n \/\/ \u0e04\u0e33\u0e19\u0e27\u0e13\u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\n const binWidth = Math.min(160, width \/ 4.8);\n const binHeight = Math.min(180, height \/ 4.5);\n const binSpacing = (width - (binWidth * 4)) \/ 5;\n\n bins = BIN_TYPES.map((bin, index) => {\n const x = binSpacing + index * (binWidth + binSpacing);\n const y = height - binHeight - 35;\n return { ...bin, x: x, y: y, w: binWidth, h: binHeight, hovered: false };\n });\n\n if (currentTrash && !pointer.grabbedItem) {\n currentTrash.x = width \/ 2;\n currentTrash.y = height \/ 2 - 40;\n }\n }\n window.addEventListener('resize', resizeCanvas);\n\n \/\/ --- Game Controls ---\n function shufflePlaylist() {\n const indices = Array.from({length: TRASH_ITEMS.length}, (_, i) => i);\n for (let i = indices.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [indices[i], indices[j]] = [indices[j], indices[i]];\n }\n \/\/ \u0e15\u0e31\u0e14\u0e2d\u0e32\u0e23\u0e4c\u0e40\u0e23\u0e22\u0e4c\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e41\u0e04\u0e48\u0e08\u0e33\u0e19\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e17\u0e35\u0e48\u0e01\u0e33\u0e2b\u0e19\u0e14 (10 \u0e02\u0e49\u0e2d)\n gamePlaylist = indices.slice(0, MAX_QUESTIONS);\n }\n\n function spawnTrash() {\n if (currentQuestionIndex >= gamePlaylist.length) {\n currentTrash = null; \/\/ \u0e0b\u0e48\u0e2d\u0e19\u0e02\u0e22\u0e30\u0e0a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22\n setTimeout(endGame, 800); \/\/ \u0e2b\u0e19\u0e48\u0e27\u0e07\u0e40\u0e27\u0e25\u0e32\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e40\u0e2d\u0e1f\u0e40\u0e1f\u0e01\u0e15\u0e4c\u0e15\u0e2d\u0e1a\u0e16\u0e39\u0e01\n return;\n }\n\n const itemIndex = gamePlaylist[currentQuestionIndex];\n const trashData = TRASH_ITEMS[itemIndex];\n\n currentTrash = {\n ...trashData,\n x: width \/ 2, y: height \/ 2 - 40,\n radius: 60, targetRadius: 60,\n targetX: width \/ 2, targetY: height \/ 2 - 40,\n isBeingDragged: false, vx: 0, vy: 0\n };\n\n pointer.grabbedItem = null;\n pointer.targetHovered = false;\n document.getElementById('progressDisplay').innerText = `${currentQuestionIndex + 1} \/ ${gamePlaylist.length}`;\n }\n\n \/\/ --- Visual Effects & Mascot Interaction ---\n function showMascotMessage(text, textColorClass = \"text-[#00205B]\", borderColorClass = \"border-[#FBBF24]\") {\n const bubble = document.getElementById('mascotBubble');\n bubble.innerText = text;\n bubble.className = `bg-white text-xs md:text-sm font-bold px-4 py-2 rounded-2xl rounded-bl-none shadow-lg mb-2 transition-all duration-300 transform border-2 ${textColorClass} ${borderColorClass} max-w-[150px] whitespace-pre-wrap leading-tight`;\n \n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\n bubble.classList.remove('opacity-0', 'translate-y-2');\n \n if (mascotMessageTimeout) clearTimeout(mascotMessageTimeout);\n mascotMessageTimeout = setTimeout(() => {\n bubble.classList.add('opacity-0', 'translate-y-2');\n }, 3000);\n }\n\n function createParticles(x, y, count, isSuccess) {\n const colors = isSuccess ? [\"#22C55E\", \"#86EFAC\", \"#BBF7D0\"] : [\"#EF4444\", \"#FCA5A5\", \"#EF4444\"];\n for (let i = 0; i < count; i++) {\n particles.push({\n x: x, y: y,\n vx: (Math.random() - 0.5) * 10,\n vy: (Math.random() - 0.5) * 10 - (Math.random() * 5),\n radius: Math.random() * 5 + 3,\n color: colors[Math.floor(Math.random() * colors.length)],\n alpha: 1, decay: Math.random() * 0.02 + 0.015\n });\n }\n }\n\n function createFeedback(text, isSuccess) {\n feedbackMessage = {\n text: text, x: width \/ 2, y: height \/ 2 - 120,\n alpha: 1, color: isSuccess ? \"#86EFAC\" : \"#FCA5A5\"\n };\n }\n\n \/\/ AR Interaction Click\n function triggerPinchClick(x, y) {\n const elem = document.elementFromPoint(x, y);\n if (!elem) return;\n \n let target = elem;\n while (target && target !== document.body) {\n if (target.tagName === 'BUTTON' || target.tagName === 'SELECT' || target.onclick || target.getAttribute('role') === 'button') {\n target.classList.add('scale-95');\n setTimeout(() => target.classList.remove('scale-95'), 150);\n target.click();\n break;\n }\n target = target.parentElement;\n }\n }\n\n function showWrongAnswerExplanation(trash) {\n gameState = 'paused';\n \n document.getElementById('expTrashName').innerText = trash.name;\n const correctBin = BIN_TYPES.find(b => b.id === trash.type);\n const correctBinDisplay = document.getElementById('expCorrectBin');\n correctBinDisplay.innerText = correctBin.name;\n correctBinDisplay.style.color = correctBin.color;\n \n document.getElementById('expDetail').innerText = trash.explanation;\n document.getElementById('explanationModal').classList.remove('hidden');\n \n const modalCanvas = document.getElementById('modalTrashCanvas');\n const mCtx = modalCanvas.getContext('2d');\n mCtx.clearRect(0, 0, 90, 90);\n mCtx.save();\n mCtx.translate(45, 45);\n mCtx.shadowColor = \"rgba(0,0,0,0.5)\";\n mCtx.shadowBlur = 6;\n mCtx.shadowOffsetY = 3;\n drawRealisticTrashItem(mCtx, trash.id, 40);\n mCtx.restore();\n }\n\n function processGamePhysics() {\n particles.forEach((p, index) => {\n p.x += p.vx;\n p.y += p.vy;\n p.vy += 0.22; \n p.alpha -= p.decay;\n if (p.alpha <= 0) particles.splice(index, 1);\n });\n\n if (feedbackMessage) {\n feedbackMessage.y -= 1.2;\n feedbackMessage.alpha -= 0.012;\n if (feedbackMessage.alpha <= 0) feedbackMessage = null;\n }\n\n \/\/ \u0e40\u0e25\u0e37\u0e2d\u0e01 Input (AR \u0e2b\u0e23\u0e37\u0e2d Mouse)\n let checkX = (trackingActive && cameraEnabled) ? pointer.x : mouseX;\n let checkY = (trackingActive && cameraEnabled) ? pointer.y : mouseY;\n let grabTrigger = (trackingActive && cameraEnabled) ? pointer.isPinching : isMouseDown;\n\n pointer.lastX += (checkX - pointer.lastX) * 0.35;\n pointer.lastY += (checkY - pointer.lastY) * 0.35;\n\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e08\u0e31\u0e1a Pinch Click\n if (trackingActive && cameraEnabled) {\n if (pointer.isPinching && !wasPinching) {\n triggerPinchClick(pointer.lastX, pointer.lastY);\n }\n wasPinching = pointer.isPinching;\n }\n\n if (gameState !== 'playing') return;\n\n if (currentTrash) {\n const dx = pointer.lastX - currentTrash.x;\n const dy = pointer.lastY - currentTrash.y;\n const distToTrash = Math.sqrt(dx * dx + dy * dy);\n\n if (grabTrigger && distToTrash < currentTrash.radius + 30 && !pointer.grabbedItem) {\n pointer.grabbedItem = currentTrash;\n currentTrash.isBeingDragged = true;\n playSound('grab');\n }\n\n if (pointer.grabbedItem === currentTrash) {\n if (grabTrigger) {\n currentTrash.x = pointer.lastX;\n currentTrash.y = pointer.lastY;\n trashAnimation.scale = 1.3; \n trashAnimation.bounce += 0.1;\n \n let overBin = false;\n bins.forEach(bin => {\n if (currentTrash.x > bin.x && currentTrash.x < bin.x + bin.w &&\n currentTrash.y > bin.y && currentTrash.y < bin.y + bin.h) {\n bin.hovered = true;\n overBin = true;\n pointer.targetHovered = true;\n } else {\n bin.hovered = false;\n }\n });\n \n pointer.pinchState = overBin ? 'hover' : 'grabbing';\n } else {\n currentTrash.isBeingDragged = false;\n pointer.grabbedItem = null;\n trashAnimation.scale = 1.0;\n \n let landedInBin = null;\n bins.forEach(bin => {\n if (currentTrash.x > bin.x && currentTrash.x < bin.x + bin.w &&\n currentTrash.y > bin.y && currentTrash.y < bin.y + bin.h) {\n landedInBin = bin;\n }\n bin.hovered = false;\n });\n\n if (landedInBin) {\n if (currentTrash.type === landedInBin.id) {\n score += 10;\n statCorrect++;\n playSound('correct');\n createParticles(currentTrash.x, currentTrash.y, 45, true);\n createFeedback(\"\u0e22\u0e2d\u0e14\u0e40\u0e22\u0e35\u0e48\u0e22\u0e21! \ud83c\udf31\", true);\n showMascotMessage(\"\u0e40\u0e01\u0e48\u0e07\u0e21\u0e32\u0e01\u0e04\u0e23\u0e31\u0e1a! \ud83c\udf1f\", \"text-green-600\", \"border-green-400\");\n document.getElementById('scoreDisplay').innerText = score;\n \n currentQuestionIndex++;\n spawnTrash();\n } else {\n score = Math.max(0, score - 5);\n statWrong++;\n playSound('wrong');\n createParticles(currentTrash.x, currentTrash.y, 30, false);\n document.getElementById('scoreDisplay').innerText = score;\n showWrongAnswerExplanation(currentTrash);\n }\n } else {\n currentTrash.vx = (width \/ 2 - currentTrash.x) * 0.18;\n currentTrash.vy = ((height \/ 2 - 40) - currentTrash.y) * 0.18;\n playSound('click');\n }\n pointer.targetHovered = false;\n pointer.pinchState = 'normal';\n }\n } else {\n if (currentTrash.vx !== 0 || currentTrash.vy !== 0) {\n currentTrash.x += currentTrash.vx;\n currentTrash.y += currentTrash.vy;\n currentTrash.vx *= 0.8;\n currentTrash.vy *= 0.8;\n if (Math.abs(currentTrash.vx) < 0.1) currentTrash.vx = 0;\n if (Math.abs(currentTrash.vy) < 0.1) currentTrash.vy = 0;\n }\n }\n }\n }\n\n \/\/ --- DRAWING: \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e09\u0e32\u0e01\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14 ---\n \n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e15\u0e39\u0e49\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e1a\u0e1a\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 (\u0e2a\u0e35\u0e44\u0e21\u0e49\u0e2d\u0e48\u0e2d\u0e19, \u0e21\u0e35\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21)\n function drawDetailedBookshelf(context, x, y, w, h, alpha) {\n context.save();\n context.globalAlpha = alpha;\n \n \/\/ \u0e42\u0e04\u0e23\u0e07\u0e15\u0e39\u0e49\u0e44\u0e21\u0e49\u0e14\u0e49\u0e32\u0e19\u0e19\u0e2d\u0e01\n context.fillStyle = '#A66B40'; \n context.fillRect(x, y, w, h);\n \n \/\/ \u0e40\u0e07\u0e32\u0e25\u0e36\u0e01\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e0a\u0e31\u0e49\u0e19\n context.fillStyle = '#6B4226'; \n context.fillRect(x + 12, y + 12, w - 24, h - 24);\n\n const shelfCount = 5;\n const shelfH = (h - 24) \/ shelfCount;\n\n \/\/ \u0e0a\u0e31\u0e49\u0e19\u0e27\u0e32\u0e07\u0e02\u0e2d\u0e07\n context.fillStyle = '#C28254'; \n for (let i = 1; i < shelfCount; i++) {\n context.fillRect(x + 12, y + 12 + i * shelfH - 6, w - 24, 12);\n context.fillStyle = '#DBA374'; \/\/ \u0e44\u0e2e\u0e44\u0e25\u0e17\u0e4c\u0e2a\u0e31\u0e19\u0e44\u0e21\u0e49\n context.fillRect(x + 12, y + 12 + i * shelfH - 6, w - 24, 3);\n context.fillStyle = '#C28254';\n }\n\n \/\/ \u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2b\u0e25\u0e32\u0e01\u0e2a\u0e35\n const bookColors = ['#1D4ED8', '#B91C1C', '#15803D', '#F59E0B', '#F3F4F6', '#374151', '#7E22CE'];\n let bookSeed = x + y + w;\n function pRand() { bookSeed = (bookSeed * 9301 + 49297) % 233280; return bookSeed \/ 233280; }\n\n for (let shelf = 0; shelf < shelfCount; shelf++) {\n const shelfY = y + 12 + (shelf + 1) * shelfH - 6;\n let cX = x + 16;\n const endX = x + w - 16;\n\n while (cX < endX - 12) {\n const bW = Math.floor(pRand() * 14) + 6;\n const bH = Math.floor(pRand() * (shelfH - 25)) + 15;\n if (cX + bW > endX) break;\n\n context.fillStyle = bookColors[Math.floor(pRand() * bookColors.length)];\n \n if (pRand() > 0.85 && cX < endX - 25) {\n \/\/ \u0e27\u0e32\u0e14\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e41\u0e1a\u0e1a\u0e40\u0e2d\u0e35\u0e22\u0e07\u0e46\n context.save();\n context.translate(cX, shelfY);\n context.rotate(0.15); \n context.fillRect(0, -bH, bW, bH);\n context.restore();\n cX += bW + 6;\n } else {\n \/\/ \u0e27\u0e32\u0e14\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e15\u0e31\u0e49\u0e07\u0e15\u0e23\u0e07\n context.fillRect(cX, shelfY - bH, bW, bH);\n context.fillStyle = 'rgba(0,0,0,0.15)'; \/\/ \u0e23\u0e48\u0e2d\u0e07\u0e2a\u0e31\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\n context.fillRect(cX + 2, shelfY - bH, 2, bH);\n cX += bW + 2;\n }\n }\n }\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d \u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e20\u0e32\u0e1e\u0e40\u0e23\u0e1f\u0e40\u0e1f\u0e2d\u0e23\u0e4c\u0e40\u0e23\u0e19\u0e0b\u0e4c\n function drawNRRULibraryReferenceScene(context, w, h, alpha) {\n context.save();\n\n \/\/ 1. \u0e41\u0e1a\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e1b\u0e49\u0e32\u0e22\u0e44\u0e27\u0e19\u0e34\u0e25\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19\u0e41\u0e02\u0e27\u0e19\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19 (\u0e08\u0e31\u0e14\u0e01\u0e36\u0e48\u0e07\u0e01\u0e25\u0e32\u0e07\u0e41\u0e25\u0e30\u0e43\u0e2b\u0e49\u0e44\u0e21\u0e48\u0e21\u0e35\u0e40\u0e2a\u0e32\u0e1a\u0e31\u0e07)\n const bannerW = Math.min(500, w * 0.7);\n const bannerH = 65;\n const bannerX = (w - bannerW) \/ 2; \n const bannerY = 85; \n \n context.globalAlpha = alpha * 0.6; \/\/ \u0e43\u0e2b\u0e49\u0e1b\u0e49\u0e32\u0e22\u0e08\u0e32\u0e07\u0e25\u0e07\u0e40\u0e25\u0e47\u0e01\u0e19\u0e49\u0e2d\u0e22 \u0e44\u0e21\u0e48\u0e41\u0e22\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e19\u0e43\u0e08\n context.fillStyle = '#1E3A8A';\n context.fillRect(bannerX, bannerY, bannerW, bannerH);\n context.strokeStyle = '#FBBF24'; \/\/ \u0e02\u0e2d\u0e1a\u0e17\u0e2d\u0e07\n context.lineWidth = 2;\n context.strokeRect(bannerX + 5, bannerY + 5, bannerW - 10, bannerH - 10);\n \n context.fillStyle = '#FBBF24';\n context.font = 'bold 18px Kanit';\n context.textAlign = 'center';\n context.fillText('\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e23\u0e32\u0e0a\u0e20\u0e31\u0e0f\u0e19\u0e04\u0e23\u0e23\u0e32\u0e0a\u0e2a\u0e35\u0e21\u0e32', bannerX + bannerW\/2, bannerY + 25);\n context.fillStyle = '#FFFFFF';\n context.font = '13px Arial';\n context.fillText('Nakhon Ratchasima Rajabhat University', bannerX + bannerW\/2, bannerY + 42);\n context.font = '11px Arial';\n context.fillStyle = '#FBBF24';\n context.fillText('Library & Information Services', bannerX + bannerW\/2, bannerY + 55);\n\n \/\/ 2. \u0e27\u0e32\u0e14\u0e15\u0e39\u0e49\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e02\u0e19\u0e32\u0e1a\u0e0b\u0e49\u0e32\u0e22\u0e41\u0e25\u0e30\u0e02\u0e27\u0e32 (\u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e08\u0e32\u0e07\u0e25\u0e07\u0e21\u0e32\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e01\u0e27\u0e19\u0e40\u0e01\u0e21\u0e40\u0e1e\u0e25\u0e22\u0e4c)\n const fadedAlpha = alpha * 0.25; \/\/ \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e08\u0e32\u0e07\u0e25\u0e07 \u0e42\u0e1b\u0e23\u0e48\u0e07\u0e41\u0e2a\u0e07\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19\n drawDetailedBookshelf(context, 0, 0, w * 0.25, h, fadedAlpha);\n drawDetailedBookshelf(context, w - w * 0.25, 0, w * 0.25, h, fadedAlpha);\n\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e42\u0e0b\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 (IT Service) \u0e15\u0e32\u0e21\u0e20\u0e32\u0e1e\u0e41\u0e19\u0e1a\n function drawITServiceScene(context, w, h, alpha) {\n context.save();\n \/\/ \u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e09\u0e32\u0e01\u0e08\u0e32\u0e07\u0e25\u0e07 (\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e41\u0e2a\u0e07\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e41\u0e22\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e19\u0e43\u0e08\u0e08\u0e32\u0e01\u0e40\u0e01\u0e21\n context.globalAlpha = alpha * 0.3;\n\n \/\/ 1. \u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e49\u0e2d\u0e07 (\u0e25\u0e32\u0e22\u0e44\u0e21\u0e49)\n context.fillStyle = '#9C623A';\n context.fillRect(0, h * 0.5, w, h * 0.5);\n\n \/\/ 2. \u0e1c\u0e19\u0e31\u0e07\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e38\u0e14 (\u0e2a\u0e35\u0e40\u0e17\u0e32\u0e2d\u0e48\u0e2d\u0e19)\n context.fillStyle = '#6B7280';\n context.fillRect(w * 0.3, 0, w * 0.3, h * 0.5);\n\n \/\/ \u0e08\u0e2d\u0e17\u0e35\u0e27\u0e35\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e38\u0e14\n context.fillStyle = '#111827';\n context.fillRect(w * 0.35, h * 0.15, w * 0.15, h * 0.15);\n context.fillStyle = '#3B82F6';\n context.fillRect(w * 0.35 + 2, h * 0.15 + 2, w * 0.15 - 4, h * 0.15 - 4);\n context.fillStyle = '#FFFFFF';\n context.font = 'bold 12px Kanit';\n context.textAlign = 'center';\n context.fillText('NRRU Library', w * 0.425, h * 0.23);\n\n \/\/ 3. \u0e1c\u0e19\u0e31\u0e07\u0e1d\u0e31\u0e48\u0e07\u0e0b\u0e49\u0e32\u0e22 (\u0e2a\u0e35\u0e40\u0e17\u0e32\u0e40\u0e02\u0e49\u0e21)\n context.fillStyle = '#374151';\n context.beginPath();\n context.moveTo(0, 0);\n context.lineTo(w * 0.3, 0);\n context.lineTo(w * 0.3, h * 0.5);\n context.lineTo(0, h * 0.7);\n context.fill();\n\n \/\/ \u0e42\u0e25\u0e42\u0e01\u0e49 NRRU \u0e41\u0e25\u0e30\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e1a\u0e19\u0e1c\u0e19\u0e31\u0e07\u0e0b\u0e49\u0e32\u0e22\n context.fillStyle = '#1E3A8A';\n context.beginPath();\n context.arc(w * 0.12, h * 0.25, Math.min(w, h) * 0.08, 0, Math.PI * 2);\n context.fill();\n context.strokeStyle = '#FBBF24';\n context.lineWidth = 4;\n context.stroke();\n context.fillStyle = '#FBBF24';\n context.font = 'bold 20px Kanit';\n context.fillText('NRRU', w * 0.12, h * 0.25 + 7);\n\n context.fillStyle = '#FFFFFF';\n context.font = 'bold 16px Kanit';\n context.textAlign = 'left';\n context.fillText('\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28', w * 0.02, h * 0.45);\n context.fillStyle = '#D1D5DB';\n context.font = '12px Arial';\n context.fillText('IT@NRRU Library', w * 0.02, h * 0.48);\n\n \/\/ 4. \u0e1c\u0e19\u0e31\u0e07\u0e1d\u0e31\u0e48\u0e07\u0e02\u0e27\u0e32 (\u0e2b\u0e49\u0e2d\u0e07 Discussion Room)\n context.fillStyle = '#E5E7EB';\n context.beginPath();\n context.moveTo(w * 0.6, 0);\n context.lineTo(w, 0);\n context.lineTo(w, h);\n context.lineTo(w * 0.6, h * 0.5);\n context.fill();\n\n \/\/ \u0e1b\u0e23\u0e30\u0e15\u0e39\/\u0e01\u0e23\u0e30\u0e08\u0e01 Discussion Rooms (\u0e40\u0e23\u0e35\u0e22\u0e07\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e14\u0e49\u0e32\u0e19\u0e43\u0e19\u0e14\u0e49\u0e27\u0e22 Perspective)\n for(let i=0; i<3; i++) {\n const perspectiveFactor = 1 + (i * 0.5);\n const doorW = w * 0.08 * perspectiveFactor;\n const doorH = h * 0.25 * perspectiveFactor;\n const doorX = w * 0.62 + (i * w * 0.12);\n const doorY = h * 0.2 - (i * h * 0.02);\n \n context.fillStyle = '#4B5563'; \/\/ \u0e01\u0e23\u0e2d\u0e1a\u0e1b\u0e23\u0e30\u0e15\u0e39\n context.fillRect(doorX - 3, doorY - 3, doorW + 6, doorH + 6);\n context.fillStyle = 'rgba(186, 230, 253, 0.6)'; \/\/ \u0e2a\u0e35\u0e1f\u0e49\u0e32\u0e01\u0e23\u0e30\u0e08\u0e01\n context.fillRect(doorX, doorY, doorW, doorH);\n\n context.fillStyle = '#1F2937'; \/\/ \u0e1b\u0e49\u0e32\u0e22\n context.fillRect(doorX, doorY - 35 * perspectiveFactor, doorW, 25 * perspectiveFactor);\n context.fillStyle = '#FFFFFF';\n context.font = 'bold ' + Math.floor(10 * perspectiveFactor) + 'px Kanit';\n context.textAlign = 'center';\n context.fillText('Room ' + (3-i), doorX + doorW\/2, doorY - 18 * perspectiveFactor);\n }\n\n context.restore();\n }\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e27\u0e32\u0e14\u0e09\u0e32\u0e01\u0e40\u0e14\u0e34\u0e21\u0e2d\u0e37\u0e48\u0e19\u0e46 \u0e04\u0e07\u0e44\u0e27\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e09\u0e32\u0e01\n function drawVectorBookshelf(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.fillStyle = '#78350F'; context.fillRect(x, y, w, h);\n context.fillStyle = '#451A03'; context.fillRect(x + 6, y + 6, w - 12, h - 12);\n const shelfCount = 3; const shelfH = (h - 12) \/ shelfCount;\n context.fillStyle = '#92400E';\n for (let i = 1; i < shelfCount; i++) context.fillRect(x + 6, y + 6 + i * shelfH - 3, w - 12, 6);\n \n const bookColors = ['#EF4444', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'];\n let bookSeed = x + y;\n function pseudoRand() { bookSeed = (bookSeed * 9301 + 49297) % 233280; return bookSeed \/ 233280; }\n\n for (let shelf = 0; shelf < shelfCount; shelf++) {\n const shelfY = y + 6 + (shelf + 1) * shelfH - 3;\n let currentX = x + 12; const shelfEndX = x + w - 12;\n while (currentX < shelfEndX - 8) {\n const bW = Math.floor(pseudoRand() * 8) + 6;\n const bH = Math.floor(pseudoRand() * (shelfH - 20)) + 15;\n if (currentX + bW > shelfEndX) break;\n context.fillStyle = bookColors[Math.floor(pseudoRand() * bookColors.length)];\n context.fillRect(currentX, shelfY - bH, bW, bH);\n currentX += bW + 2;\n }\n }\n context.restore();\n }\n\n function drawVectorReadingCorner(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.fillStyle = '#115E59'; \n context.beginPath(); context.roundRect(x, y + h - 50, w, 50, [15, 15, 0, 0]); context.fill();\n context.fillStyle = '#14B8A6';\n for (let i = 0; i < 3; i++) {\n context.beginPath(); context.roundRect(x + 15 + i * (w\/3.5), y + h - 85, w\/4.5, 45, 10); context.fill();\n }\n context.restore();\n }\n\n function drawVectorWindow(context, x, y, w, h, alpha) {\n context.save(); context.globalAlpha = alpha;\n const skyGrad = context.createLinearGradient(x, y, x, y + h);\n skyGrad.addColorStop(0, '#BAE6FD'); skyGrad.addColorStop(1, '#E0F2FE');\n context.fillStyle = skyGrad;\n context.beginPath(); context.moveTo(x, y + h); context.lineTo(x, y + w\/2);\n context.arc(x + w\/2, y + w\/2, w\/2, Math.PI, 0); context.lineTo(x + w, y + h); context.fill();\n context.fillStyle = '#FEF08A'; context.beginPath(); context.arc(x + w - 35, y + 40, 20, 0, Math.PI * 2); context.fill();\n context.strokeStyle = '#FFFFFF'; context.lineWidth = 5; context.stroke();\n context.restore();\n }\n\n function drawVectorHangingVines(context, x, y, len, alpha) {\n context.save(); context.globalAlpha = alpha;\n context.strokeStyle = '#15803D'; context.lineWidth = 2.5;\n context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(x - 15, y + len\/2, x - 5, y + len); context.stroke();\n context.fillStyle = '#22C55E';\n for (let i = 1; i <= 6; i++) {\n const leafY = y + (len \/ 7) * i; const leafX = x - 8 + Math.sin(i) * 6;\n context.beginPath(); context.ellipse(leafX, leafY, 7, 3.5, Math.PI\/4 * (i%2===0?1:-1), 0, Math.PI * 2); context.fill();\n }\n context.restore();\n }\n\n \/\/ --- DRAWING: \u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\u0e41\u0e25\u0e30\u0e44\u0e2d\u0e40\u0e17\u0e21 ---\n function drawBMABin(bin) {\n ctx.save();\n const taper = 12; \/\/ \u0e01\u0e49\u0e19\u0e16\u0e31\u0e07\u0e2a\u0e2d\u0e1a\u0e40\u0e02\u0e49\u0e32\n const lidHeight = 22;\n \n \/\/ \u0e40\u0e07\u0e32\u0e02\u0e2d\u0e07\u0e16\u0e31\u0e07 (Hover effect)\n if(bin.hovered) {\n ctx.shadowColor = bin.color;\n ctx.shadowBlur = 20;\n } else {\n ctx.shadowColor = 'rgba(0,0,0,0.4)';\n ctx.shadowBlur = 10;\n ctx.shadowOffsetY = 5;\n }\n\n \/\/ 1. \u0e15\u0e31\u0e27\u0e16\u0e31\u0e07\n ctx.fillStyle = `${bin.color}E6`;\n ctx.strokeStyle = bin.darkColor;\n ctx.lineWidth = 3;\n ctx.lineJoin = 'round';\n ctx.beginPath();\n ctx.moveTo(bin.x + taper, bin.y + lidHeight);\n ctx.lineTo(bin.x + bin.w - taper, bin.y + lidHeight);\n ctx.lineTo(bin.x + bin.w - taper * 2, bin.y + bin.h);\n ctx.lineTo(bin.x + taper * 2, bin.y + bin.h);\n ctx.closePath();\n ctx.fill(); ctx.stroke();\n\n \/\/ 2. Texture \u0e40\u0e2a\u0e49\u0e19\u0e46 \u0e02\u0e49\u0e32\u0e07\u0e16\u0e31\u0e07\n ctx.save();\n ctx.shadowBlur = 0;\n ctx.strokeStyle = 'rgba(255,255,255,0.2)';\n ctx.lineWidth = 6; ctx.lineCap = 'round';\n ctx.beginPath();\n ctx.moveTo(bin.x + bin.w\/2 - 15, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2 - 10, bin.y + bin.h - 15);\n ctx.moveTo(bin.x + bin.w\/2, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2, bin.y + bin.h - 15);\n ctx.moveTo(bin.x + bin.w\/2 + 15, bin.y + lidHeight + 15); ctx.lineTo(bin.x + bin.w\/2 + 10, bin.y + bin.h - 15);\n ctx.stroke();\n ctx.restore();\n\n \/\/ 3. \u0e1d\u0e32\u0e16\u0e31\u0e07\n ctx.beginPath();\n ctx.roundRect(bin.x, bin.y, bin.w, lidHeight, 6);\n ctx.fill(); ctx.stroke();\n\n \/\/ \u0e2b\u0e39\u0e08\u0e31\u0e1a\n ctx.beginPath();\n ctx.moveTo(bin.x + bin.w\/2 - 15, bin.y); ctx.lineTo(bin.x + bin.w\/2 + 15, bin.y);\n ctx.lineWidth = 6; ctx.stroke();\n\n \/\/ 4. \u0e1b\u0e49\u0e32\u0e22\u0e2a\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e2b\u0e19\u0e49\u0e32\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\n const labelW = bin.w - 30;\n const labelH = 55;\n const labelX = bin.x + (bin.w - labelW) \/ 2;\n const labelY = bin.y + lidHeight + 15;\n\n ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = 4; ctx.shadowOffsetY = 2;\n ctx.fillStyle = '#ffffff'; ctx.strokeStyle = '#e5e7eb'; ctx.lineWidth = 2;\n ctx.beginPath(); ctx.roundRect(labelX, labelY, labelW, labelH, 8);\n ctx.fill(); ctx.stroke();\n\n ctx.shadowBlur = 0;\n ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n ctx.font = '22px Arial';\n ctx.fillText(bin.logoType, bin.x + bin.w\/2, labelY + 16);\n ctx.fillStyle = '#1f2937';\n ctx.font = 'bold 13px Kanit';\n ctx.fillText(bin.name, bin.x + bin.w\/2, labelY + 40);\n\n ctx.restore();\n }\n\n function drawRealisticTrashItem(context, id, size) {\n \/\/ \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e2d\u0e40\u0e17\u0e47\u0e21\n const item = TRASH_ITEMS.find(t => t.id === id);\n if(!item) return;\n\n \/\/ \u0e27\u0e32\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e36\u0e1a\u0e41\u0e2a\u0e07 100% (Solid Color) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\n context.fillStyle = '#FFFFFF'; \n context.strokeStyle = '#CBD5E1'; \n context.lineWidth = 3;\n context.beginPath();\n context.roundRect(-size\/2, -size\/2, size, size, 16);\n context.fill();\n context.stroke();\n\n \/\/ \u0e1b\u0e34\u0e14\u0e40\u0e07\u0e32\u0e01\u0e48\u0e2d\u0e19\u0e27\u0e32\u0e14\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34\u0e40\u0e1a\u0e25\u0e2d\n context.shadowColor = \"transparent\";\n\n \/\/ \u0e27\u0e32\u0e14\u0e2d\u0e34\u0e42\u0e21\u0e08\u0e34\u0e02\u0e22\u0e30\u0e15\u0e23\u0e07\u0e01\u0e25\u0e32\u0e07 (\u0e1b\u0e23\u0e31\u0e1a\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e43\u0e2b\u0e49\u0e43\u0e2b\u0e0d\u0e48\u0e02\u0e36\u0e49\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19)\n context.font = `${size * 0.65}px Arial`;\n context.textAlign = 'center';\n context.textBaseline = 'middle';\n context.fillText(item.emoji, 0, 5);\n }\n\n function drawFancyCursor() {\n ctx.save();\n ctx.beginPath();\n ctx.arc(pointer.lastX, pointer.lastY, 22, 0, Math.PI * 2);\n ctx.lineWidth = 4;\n \n if (pointer.pinchState === 'grabbing') {\n ctx.strokeStyle = '#22C55E';\n ctx.fillStyle = 'rgba(34, 197, 94, 0.3)';\n ctx.fill(); ctx.stroke();\n ctx.font = '16px Arial'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillStyle='#fff';\n ctx.fillText('\u2714\ufe0f', pointer.lastX, pointer.lastY);\n } else if (pointer.pinchState === 'hover') {\n ctx.strokeStyle = '#FBBF24';\n ctx.setLineDash([6, 6]);\n ctx.stroke();\n } else {\n ctx.strokeStyle = '#3B82F6';\n ctx.fillStyle = 'rgba(59, 130, 246, 0.2)';\n ctx.fill(); ctx.stroke();\n }\n ctx.restore();\n }\n\n \/\/ --- RENDER LOOP ---\n function renderScene() {\n ctx.clearRect(0, 0, width, height);\n\n if (cameraEnabled && videoElement.readyState >= 2) {\n ctx.save();\n ctx.scale(-1, 1);\n ctx.drawImage(videoElement, -width, 0, width, height);\n ctx.restore();\n ctx.fillStyle = \"rgba(15, 23, 42, 0.65)\"; \n ctx.fillRect(0, 0, width, height);\n } else {\n const grad = ctx.createLinearGradient(0, 0, 0, height);\n if (currentLibraryScene === 0) { \n grad.addColorStop(0, '#FFFBEB'); \/\/ \u0e2a\u0e35\u0e04\u0e23\u0e35\u0e21\u0e2d\u0e1a\u0e2d\u0e38\u0e48\u0e19 \n grad.addColorStop(1, '#B45309'); \/\/ \u0e2a\u0e35\u0e44\u0e21\u0e49 \n }\n else if (currentLibraryScene === 1) { grad.addColorStop(0, '#0F172A'); grad.addColorStop(1, '#115E59'); }\n else if (currentLibraryScene === 2) { \n grad.addColorStop(0, '#374151'); \/\/ \u0e18\u0e35\u0e21 IT Service \u0e2a\u0e35\u0e40\u0e17\u0e32\n grad.addColorStop(1, '#5B21B6'); \/\/ \u0e2a\u0e35\u0e21\u0e48\u0e27\u0e07\n }\n else { grad.addColorStop(0, '#0F172A'); grad.addColorStop(1, '#1E3A8A'); }\n ctx.fillStyle = grad; ctx.fillRect(0, 0, width, height);\n }\n\n const overlayAlpha = cameraEnabled ? 0.42 : 1.0;\n\n if (gameState === 'playing' || gameState === 'paused' || gameState === 'instructions') {\n \n if (currentLibraryScene === 0) {\n \/\/ \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e09\u0e32\u0e01\u0e42\u0e0b\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e2d\u0e34\u0e07\u0e08\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e41\u0e19\u0e1a (\u0e44\u0e21\u0e48\u0e27\u0e32\u0e14\u0e15\u0e31\u0e27\u0e25\u0e30\u0e04\u0e23)\n drawNRRULibraryReferenceScene(ctx, width, height, overlayAlpha);\n } else if (currentLibraryScene === 1) {\n drawVectorReadingCorner(ctx, width * 0.16, height * 0.46, width * 0.68, height * 0.22, overlayAlpha);\n drawVectorBookshelf(ctx, 10, 90, width * 0.11, height * 0.45, overlayAlpha * 0.6);\n drawVectorBookshelf(ctx, width - width * 0.11 - 10, 90, width * 0.11, height * 0.45, overlayAlpha * 0.6);\n } else if (currentLibraryScene === 2) {\n \/\/ \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e07 \u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 IT Service\n drawITServiceScene(ctx, width, height, overlayAlpha);\n } else if (currentLibraryScene === 3) {\n ctx.save(); ctx.globalAlpha = overlayAlpha;\n ctx.fillStyle = '#065F46'; ctx.beginPath(); ctx.roundRect(width * 0.1, height * 0.55, width * 0.8, height * 0.15, 12); ctx.fill();\n ctx.fillStyle = '#34D399'; ctx.font = \"32px serif\"; ctx.textAlign = 'center'; ctx.fillText(\"\ud83c\udf3f NRRU GREEN SERVICE\", width\/2, height * 0.61);\n ctx.restore();\n }\n\n bins.forEach(bin => drawBMABin(bin));\n\n if (currentTrash) {\n ctx.save();\n ctx.translate(currentTrash.x, currentTrash.y);\n const currentScale = trashAnimation.scale + Math.sin(trashAnimation.bounce) * 0.05;\n ctx.scale(currentScale, currentScale);\n\n ctx.shadowColor = \"rgba(0, 0, 0, 0.85)\";\n ctx.shadowBlur = pointer.grabbedItem ? 25 : 12;\n ctx.shadowOffsetX = pointer.grabbedItem ? 6 : 3;\n ctx.shadowOffsetY = pointer.grabbedItem ? 12 : 5;\n\n drawRealisticTrashItem(ctx, currentTrash.id, 90); \n ctx.restore();\n\n ctx.save();\n ctx.translate(currentTrash.x, currentTrash.y);\n ctx.fillStyle = \"#FFFFFF\"; ctx.font = \"bold 20px Kanit\"; ctx.textAlign = \"center\";\n ctx.shadowColor = \"rgba(0,0,0,0.9)\"; ctx.shadowBlur = 6;\n ctx.fillText(currentTrash.name, 0, 75); \n ctx.restore();\n }\n\n if (cameraEnabled && trackingActive && handData && handData.multiHandLandmarks) {\n for (const landmarks of handData.multiHandLandmarks) {\n ctx.lineWidth = 3.5; ctx.strokeStyle = \"rgba(187, 247, 208, 0.6)\";\n const connections = [[0, 1], [1, 2], [2, 3], [3, 4], [0, 5], [5, 6], [6, 7], [7, 8], [5, 9], [9, 10], [10, 11], [11, 12], [9, 13], [13, 14], [14, 15], [15, 16], [13, 17], [17, 18], [18, 19], [19, 20], [0, 17]];\n connections.forEach(([i1, i2]) => {\n ctx.beginPath(); ctx.moveTo((1 - landmarks[i1].x) * width, landmarks[i1].y * height);\n ctx.lineTo((1 - landmarks[i2].x) * width, landmarks[i2].y * height); ctx.stroke();\n });\n ctx.fillStyle = \"#10B981\";\n landmarks.forEach(p => {\n ctx.beginPath(); ctx.arc((1 - p.x) * width, p.y * height, 4.5, 0, Math.PI * 2); ctx.fill();\n });\n }\n }\n\n particles.forEach(p => {\n ctx.save(); ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color;\n ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fill(); ctx.restore();\n });\n\n if (feedbackMessage) {\n ctx.save(); ctx.globalAlpha = feedbackMessage.alpha; ctx.fillStyle = feedbackMessage.color;\n ctx.font = \"bold 23px Kanit\"; ctx.textAlign = \"center\"; ctx.shadowColor = \"rgba(0,0,0,0.85)\"; ctx.shadowBlur = 6;\n ctx.fillText(feedbackMessage.text, feedbackMessage.x, feedbackMessage.y); ctx.restore();\n }\n\n drawFancyCursor();\n }\n }\n\n \/\/ --- MAIN GAME LOOP ---\n function gameLoop() {\n processGamePhysics();\n renderScene();\n requestAnimationFrame(gameLoop);\n }\n\n \/\/ --- MEDIAPIPE INITIALIZATION ---\n async function setupMediaPipe() {\n if (isCameraInitializing) return;\n isCameraInitializing = true;\n \n handsDetector = new Hands({locateFile: (file) => `https:\/\/cdn.jsdelivr.net\/npm\/@mediapipe\/hands\/${file}`});\n handsDetector.setOptions({ maxNumHands: 1, modelComplexity: 1, minDetectionConfidence: 0.7, minTrackingConfidence: 0.7 });\n \n handsDetector.onResults((results) => {\n handData = results;\n if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {\n trackingActive = true;\n const landmarks = results.multiHandLandmarks[0];\n const indexTip = landmarks[8];\n const thumbTip = landmarks[4];\n \n pointer.x = (1 - indexTip.x) * width;\n pointer.y = indexTip.y * height;\n \n const tx = (1 - thumbTip.x) * width;\n const ty = thumbTip.y * height;\n const dist = Math.hypot(pointer.x - tx, pointer.y - ty);\n \n pointer.isPinching = dist < 50; \n \n document.getElementById('arStatusText').innerText = \"\u0e08\u0e31\u0e1a\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08!\";\n document.getElementById('arStatusIndicator').classList.replace('bg-yellow-400', 'bg-green-400');\n document.getElementById('arStatusIndicator').classList.remove('animate-pulse');\n } else {\n trackingActive = false;\n document.getElementById('arStatusText').innerText = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07...\";\n document.getElementById('arStatusIndicator').classList.replace('bg-green-400', 'bg-yellow-400');\n document.getElementById('arStatusIndicator').classList.add('animate-pulse');\n }\n });\n\n cameraHelper = new Camera(videoElement, {\n onFrame: async () => {\n if (cameraEnabled) await handsDetector.send({image: videoElement});\n },\n width: 640, height: 480\n });\n \n try {\n await cameraHelper.start();\n cameraEnabled = true;\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\udfe2';\n document.getElementById('cameraStatusText').innerText = 'AR \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27';\n } catch (err) {\n console.error(\"Camera error:\", err);\n cameraEnabled = false;\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\uddb1\ufe0f';\n document.getElementById('cameraStatusText').innerText = '\u0e42\u0e2b\u0e21\u0e14\u0e40\u0e21\u0e32\u0e2a\u0e4c \/ \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19';\n document.getElementById('gameFooter').classList.add('hidden');\n }\n isCameraInitializing = false;\n }\n\n \/\/ --- GAME STATE FLOW ---\n function startGame() {\n score = 0; statCorrect = 0; statWrong = 0;\n currentQuestionIndex = 0;\n shufflePlaylist();\n spawnTrash();\n gameState = 'playing';\n \n document.getElementById('scoreDisplay').innerText = score;\n document.getElementById('gameHeader').classList.remove('opacity-0');\n document.getElementById('gameFooter').classList.remove('opacity-0');\n document.getElementById('instructionsScreen').classList.add('hidden');\n\n \/\/ \u0e41\u0e2a\u0e14\u0e07\u0e19\u0e49\u0e2d\u0e07 Mascot \u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e01\u0e21\n document.getElementById('inGameMascotContainer').classList.remove('opacity-0');\n setTimeout(() => showMascotMessage(\"\u0e25\u0e32\u0e01\u0e02\u0e22\u0e30\u0e25\u0e07\u0e16\u0e31\u0e07\u0e43\u0e2b\u0e49\u0e16\u0e39\u0e01\u0e2a\u0e35\u0e19\u0e30\u0e04\u0e23\u0e31\u0e1a! \u267b\ufe0f\", \"text-blue-600\", \"border-blue-300\"), 800);\n }\n\n function endGame() {\n gameState = 'gameover';\n document.getElementById('gameHeader').classList.add('opacity-0');\n document.getElementById('gameFooter').classList.add('opacity-0');\n document.getElementById('inGameMascotContainer').classList.add('opacity-0');\n document.getElementById('gameOverScreen').classList.remove('hidden');\n \n document.getElementById('finalScore').innerText = score;\n document.getElementById('finalCorrect').innerText = `${statCorrect} \/ ${gamePlaylist.length}`;\n document.getElementById('finalWrong').innerText = statWrong;\n \n const accuracy = gamePlaylist.length > 0 ? Math.round((statCorrect \/ gamePlaylist.length) * 100) : 0;\n document.getElementById('finalAccuracy').innerText = `${accuracy}%`;\n }\n\n \/\/ --- EVENT LISTENERS ---\n document.getElementById('btnEnterGame').addEventListener('click', () => {\n playSound('click');\n document.getElementById('welcomeScreen').classList.add('hidden');\n document.getElementById('instructionsScreen').classList.remove('hidden');\n setupMediaPipe(); \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e42\u0e2b\u0e25\u0e14\u0e42\u0e21\u0e40\u0e14\u0e25\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\n });\n\n document.getElementById('btnStartGame').addEventListener('click', () => {\n playSound('click');\n startGame();\n });\n\n document.getElementById('btnPlayAgain').addEventListener('click', () => {\n playSound('click');\n document.getElementById('gameOverScreen').classList.add('hidden');\n startGame();\n });\n\n document.getElementById('btnDismissExplanation').addEventListener('click', () => {\n playSound('click');\n document.getElementById('explanationModal').classList.add('hidden');\n currentQuestionIndex++;\n \n \/\/ \u0e40\u0e0a\u0e47\u0e04\u0e27\u0e48\u0e32\u0e08\u0e1a 10 \u0e02\u0e49\u0e2d\u0e41\u0e25\u0e49\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07 \u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e15\u0e2d\u0e1a\u0e1c\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e2a\u0e38\u0e14\u0e17\u0e49\u0e32\u0e22\n if (currentQuestionIndex >= gamePlaylist.length) {\n currentTrash = null;\n endGame();\n } else {\n spawnTrash();\n gameState = 'playing';\n setTimeout(() => showMascotMessage(\"\u0e21\u0e32\u0e1e\u0e22\u0e32\u0e22\u0e32\u0e21\u0e01\u0e31\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e19\u0e30! \ud83d\udcaa\", \"text-blue-600\", \"border-blue-400\"), 500);\n }\n });\n\n document.getElementById('btnRestart').addEventListener('click', () => {\n playSound('click');\n startGame();\n });\n\n document.getElementById('btnToggleCamera').addEventListener('click', () => {\n playSound('click');\n cameraEnabled = !cameraEnabled;\n if (cameraEnabled) {\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\udfe2';\n document.getElementById('cameraStatusText').innerText = 'AR \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27';\n document.getElementById('gameFooter').classList.remove('hidden');\n } else {\n document.getElementById('cameraStatusIcon').innerText = '\ud83d\uddb1\ufe0f';\n document.getElementById('cameraStatusText').innerText = '\u0e42\u0e2b\u0e21\u0e14\u0e40\u0e21\u0e32\u0e2a\u0e4c \/ \u0e17\u0e31\u0e0a\u0e2a\u0e01\u0e23\u0e35\u0e19';\n document.getElementById('gameFooter').classList.add('hidden');\n }\n });\n\n document.getElementById('sceneSelector').addEventListener('change', (e) => {\n currentLibraryScene = parseInt(e.target.value);\n playSound('click');\n });\n\n \/\/ Mouse & Touch Fallback Events\n function setMousePos(e) {\n mouseX = e.touches ? e.touches[0].clientX : e.clientX;\n mouseY = e.touches ? e.touches[0].clientY : e.clientY;\n }\n canvas.addEventListener('mousedown', (e) => { setMousePos(e); isMouseDown = true; });\n canvas.addEventListener('mousemove', setMousePos);\n canvas.addEventListener('mouseup', () => isMouseDown = false);\n canvas.addEventListener('touchstart', (e) => { e.preventDefault(); setMousePos(e); isMouseDown = true; }, {passive: false});\n canvas.addEventListener('touchmove', (e) => { e.preventDefault(); setMousePos(e); }, {passive: false});\n canvas.addEventListener('touchend', (e) => { e.preventDefault(); isMouseDown = false; }, {passive: false});\n\n \/\/ Initialize\n resizeCanvas();\n requestAnimationFrame(gameLoop);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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>NRRU Green Library – AR Waste Sorting Game \u0e04\u0e30\u0e41\u0e19\u0e19 0 \u0e04\u0e27\u0e32\u0e21\u0e04\u0e37\u0e1a\u0e2b\u0e19\u0e49\u0e32 1 \/ 10 \u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14 \ud83d\udcda \u0e42\u0e0b\u0e19\u0e0a\u0e31\u0e49\u0e19\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30\ud83d\udecb\ufe0f \u0e21\u0e38\u0e21\u0e42\u0e0b\u0e1f\u0e32\u0e19\u0e31\u0e48\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e23\u0e31\u0e01\u0e29\u0e4c\u0e42\u0e25\u0e01\ud83d\udcbb \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 IT\ud83c\udfe2 \u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e01\u0e23\u0e35\u0e19\u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c \ud83d\udd34 \u0e42\u0e2b\u0e25\u0e14 AR… \u0e40\u0e23\u0e34\u0e48\u0e21\u0e43\u0e2b\u0e21\u0e48 \u0e0a\u0e48\u0e27\u0e22\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e19\u0e30! N \u0e01\u0e33\u0e25\u0e31\u0e07\u0e2b\u0e32\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e25\u0e49\u0e2d\u0e07… NRRU LIBRARY…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5673","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5673"}],"version-history":[{"count":5,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673\/revisions"}],"predecessor-version":[{"id":5678,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=\/wp\/v2\/posts\/5673\/revisions\/5678"}],"wp:attachment":[{"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/library.nrru.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}