{"id":526,"date":"2026-01-10T13:56:32","date_gmt":"2026-01-10T13:56:32","guid":{"rendered":"https:\/\/yebbo.com\/ethiodiego\/?page_id=526"},"modified":"2026-01-10T13:56:35","modified_gmt":"2026-01-10T13:56:35","slug":"yebbo-arcade-ethio-trivia-jeopardy","status":"publish","type":"page","link":"http:\/\/yebbo.com\/ethiodiego\/yebbo-arcade-ethio-trivia-jeopardy\/","title":{"rendered":"YEBBO ARCADE \u2022 ETHIO TRIVIA JEOPARDY"},"content":{"rendered":"\n\n\n\n \n YEBBO ARCADE \u2022 ETHIO TRIVIA JEOPARDY (Board + Teams + Final + Leaderboard)<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <style>\n \/* ============================================================\n THEME \/ SKINS (YebboSkins)\n ============================================================ *\/\n :root{\n --bg1:#2b2d55;\n --bg2:#050515;\n --bg3:#01010a;\n\n --panel:#050715;\n --bezel:#050811;\n --accent:#00f0ff;\n --accent2:#00ff9d;\n --gold:#ffdd3c;\n --danger:#ff4b6e;\n\n --text:#ffffff;\n --muted:rgba(255,255,255,0.75);\n\n --shadow: 0 25px 60px rgba(0,0,0,0.9);\n }\n\n \/* Skin presets *\/\n [data-skin=\"yebbo\"]{\n --accent:#00f0ff; --accent2:#00ff9d; --gold:#ffdd3c;\n }\n [data-skin=\"yebbosports\"]{\n --accent:#35d0ff; --accent2:#7CFF6B; --gold:#FFD24A;\n }\n [data-skin=\"yebboacademy\"]{\n --accent:#9b7cff; --accent2:#00f0ff; --gold:#ffdd3c;\n }\n [data-skin=\"ethiotrivia\"]{\n --accent:#0F47AF; --accent2:#078930; --gold:#FCDD09; \/* Ethiopian colors feel (no emblem) *\/\n }\n\n *{margin:0;padding:0;box-sizing:border-box;}\n body{\n font-family:'Trebuchet MS', Arial, sans-serif;\n background: radial-gradient(circle at top, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);\n color:var(--text);\n min-height:100vh;\n display:flex;\n justify-content:center;\n align-items:center;\n padding:16px;\n overflow-x:hidden;\n }\n\n .content-wrapper{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;justify-content:center;width:100%;}\n .tv-container{width:min(980px, 100%);perspective:1000px;}\n .flat-screen-tv{\n background:var(--panel);\n border-radius:20px;\n padding:18px;\n box-shadow:var(--shadow);\n position:relative;\n border:2px solid rgba(255,255,255,0.08);\n transform-style:preserve-3d;\n width:100%;\n }\n .tv-bezel{\n background: linear-gradient(135deg, var(--bezel), var(--bezel) 40%, rgba(21,21,58,0.9) 100%);\n border-radius:14px;\n padding:14px;\n position:relative;\n box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.12);\n }\n .tv-screen{\n background:\n linear-gradient(45deg, rgba(0, 255, 188, 0.10) 25%, transparent 25%, transparent 75%, rgba(0, 255, 188, 0.10) 75%, rgba(0, 255, 188, 0.10)),\n linear-gradient(45deg, rgba(0, 195, 255, 0.10) 25%, transparent 25%, transparent 75%, rgba(0, 195, 255, 0.10) 75%, rgba(0, 195, 255, 0.10)),\n radial-gradient(circle at top, #0f1936, #050616 70%);\n background-size: 26px 26px, 26px 26px, 100% 100%;\n background-position: 0 0, 13px 13px, 0 0;\n border-radius:10px;\n padding:18px;\n min-height:560px;\n position:relative;\n overflow:hidden;\n border:1px solid rgba(0,240,255,0.28);\n box-shadow: inset 0 0 20px rgba(0,0,0,0.8);\n }\n .tv-screen::before{\n content:\"\";\n position:absolute; inset:0;\n background:repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 2px);\n pointer-events:none;\n opacity:0.9;\n }\n\n .screen-reflections{\n position:absolute; inset:0;\n background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 100%);\n pointer-events:none;\n border-radius:10px;\n z-index:1;\n }\n .tv-frame-decoration{\n position:absolute; inset:0;\n border:2px solid transparent;\n border-image: linear-gradient(to bottom, rgba(21,21,56,0.9), var(--accent), rgba(21,21,56,0.9)) 1;\n border-radius:14px;\n pointer-events:none;\n z-index:1;\n }\n\n .yebbo-logo{\n position:absolute;\n top:12px; left:16px;\n font-size:20px; font-weight:900; letter-spacing:1px;\n background: linear-gradient(45deg, var(--accent), var(--accent2), var(--accent));\n -webkit-background-clip:text; background-clip:text; color:transparent;\n text-shadow:0 0 10px rgba(0,255,255,0.55);\n z-index:30;\n user-select:none;\n }\n .yebbo-logo small{\n font-size:11px; opacity:0.95; letter-spacing:2px;\n margin-left:6px;\n color:rgba(255,255,255,0.85);\n -webkit-text-fill-color:rgba(255,255,255,0.85);\n }\n\n .top-right{\n position:absolute; top:12px; right:16px;\n background: rgba(2,8,32,0.9);\n border:1px solid rgba(0,240,255,0.28);\n border-radius:10px;\n padding:8px 10px;\n z-index:30;\n box-shadow: 0 4px 10px rgba(0,0,0,0.7);\n display:flex;flex-direction:column;gap:6px;align-items:flex-end;\n min-width:210px;\n }\n .time{font-weight:800;font-size:13px;}\n .pillrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}\n .pill{\n background: rgba(0,255,255,0.10);\n border:1px solid rgba(0,255,255,0.22);\n padding:2px 8px;\n border-radius:999px;\n font-size:12px;\n user-select:none;\n white-space:nowrap;\n }\n #daily-double-badge.dd-pulse{\n display:inline-block !important;\n animation: ddPulse 1.1s ease-in-out infinite;\n border: 1px solid rgba(255,221,60,0.65);\n box-shadow: 0 0 12px rgba(255,221,60,0.25);\n }\n @keyframes ddPulse{\n 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,221,60,0)); }\n 50% { transform: scale(1.06);filter: drop-shadow(0 0 10px rgba(255,221,60,0.6)); }\n 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,221,60,0)); }\n }\n\n .modebar{\n position:absolute; top:68px; left:16px;\n display:flex; gap:8px; flex-wrap:wrap;\n z-index:25;\n }\n .chip{\n border:1px solid rgba(255,255,255,0.18);\n background: rgba(5,15,40,0.78);\n color:#fff;\n padding:6px 10px;\n border-radius:999px;\n font-size:12px;\n cursor:pointer;\n transition: transform .15s ease, background .15s ease;\n user-select:none;\n }\n .chip:hover{transform: translateY(-1px);}\n .chip.active{\n background: rgba(0,240,255,0.20);\n border-color: rgba(0,240,255,0.45);\n }\n\n .main{\n position:relative;\n z-index:10;\n padding-top:58px; \/* makes room for top elements *\/\n }\n\n .title{\n text-align:center;\n font-family:'Impact', system-ui, sans-serif;\n letter-spacing:4px;\n font-size:32px;\n margin-bottom:8px;\n text-shadow: 0 0 10px var(--accent), 0 0 18px rgba(0,255,180,0.5);\n user-select:none;\n }\n .subtitle{\n text-align:center;\n color:rgba(255,255,255,0.8);\n font-size:12px;\n letter-spacing:1px;\n margin-bottom:14px;\n user-select:none;\n }\n\n \/* ====== Arcade view ====== *\/\n .question-number{\n text-align:center;\n display:inline-block;\n margin:0 auto 10px;\n background: var(--accent2);\n color:#000;\n padding:5px 12px;\n border-radius:999px;\n font-weight:900;\n font-size:12px;\n box-shadow:0 2px 6px rgba(0,0,0,0.4);\n }\n .category{\n text-align:center;\n color: var(--accent);\n font-weight:900;\n letter-spacing:3px;\n text-transform:uppercase;\n margin:6px 0 8px;\n font-size:18px;\n text-shadow:0 2px 5px rgba(0,0,0,0.7);\n }\n .question{\n font-size:22px;\n text-align:center;\n margin: 8px auto 10px;\n line-height:1.35;\n max-width: 92%;\n text-shadow:0 2px 5px rgba(0,0,0,0.8);\n }\n .answer{\n font-size:19px;\n text-align:center;\n margin: 8px auto 10px;\n color: var(--gold);\n font-weight:900;\n display:none;\n max-width:92%;\n text-shadow:0 2px 5px rgba(0,0,0,0.8);\n }\n\n .choices{\n display:grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap:10px;\n width: min(760px, 100%);\n margin: 10px auto 0;\n }\n .choice-btn{\n background: rgba(5,15,40,0.9);\n border: 1px solid rgba(0,240,255,0.35);\n color:#fff;\n padding:10px 12px;\n border-radius:10px;\n cursor:pointer;\n text-align:left;\n display:flex;\n gap:8px;\n align-items:flex-start;\n transition: transform 0.15s ease, background 0.15s ease;\n box-shadow:0 3px 10px rgba(0,0,0,0.6);\n min-height:52px;\n user-select:none;\n touch-action: manipulation;\n }\n .choice-btn:hover{transform: translateY(-1px); background: rgba(10,35,80,0.95);}\n .choice-label{\n background: rgba(0,240,255,0.18);\n padding:2px 9px;\n border-radius:999px;\n font-size:12px;\n font-weight:900;\n margin-top:1px;\n }\n .choice-text{flex:1;font-size:14px;line-height:1.25;}\n .choice-btn.correct{background:#17c964;border-color:#00a85a;color:#041008;}\n .choice-btn.wrong{background:var(--danger);border-color:#b31236;color:#fff7f7;}\n .choice-btn.disabled{opacity:0.78;pointer-events:none;cursor:default;}\n\n .controls{\n display:flex;\n justify-content:center;\n gap:10px;\n flex-wrap:wrap;\n margin-top:12px;\n }\n .btn{\n border:none;\n background: var(--gold);\n color:#000;\n font-weight:900;\n padding:9px 14px;\n border-radius:10px;\n cursor:pointer;\n box-shadow:0 4px 10px rgba(0,0,0,0.4);\n transition: transform .15s ease;\n text-transform:uppercase;\n letter-spacing:0.5px;\n user-select:none;\n touch-action: manipulation;\n font-size:13px;\n }\n .btn:hover{transform: translateY(-1px);}\n .btn.secondary{background: var(--accent); color:#041018;}\n .btn.danger{background: var(--danger); color:#fff;}\n .tts-controls{display:flex;justify-content:center;gap:10px;margin-top:8px;}\n .tts-btn{\n border:none;background: rgba(0,240,255,0.22);\n color:#fff;padding:7px 12px;border-radius:999px;cursor:pointer;\n border:1px solid rgba(0,240,255,0.28);\n font-weight:900;font-size:12px;\n user-select:none; touch-action: manipulation;\n }\n\n \/* ====== Hard timer progress ====== *\/\n .hard-timer-wrap{\n width: min(760px, 100%);\n height: 10px;\n margin: 10px auto 4px;\n border-radius: 999px;\n overflow: hidden;\n background: rgba(0, 240, 255, 0.10);\n border: 1px solid rgba(0, 240, 255, 0.22);\n box-shadow: inset 0 0 10px rgba(0,0,0,0.55);\n display:none;\n }\n .hard-timer-bar{\n height:100%;\n width:100%;\n border-radius:999px;\n background: linear-gradient(90deg, rgba(0,240,255,0.9), rgba(0,255,160,0.9));\n transition: width 0.08s linear;\n }\n .hard-timer-wrap.danger{\n border-color: rgba(255, 75, 110, 0.75);\n box-shadow: inset 0 0 12px rgba(255,75,110,0.25);\n }\n .hard-timer-bar.danger{\n background: linear-gradient(90deg, rgba(255,75,110,0.95), rgba(255,221,60,0.95));\n animation: dangerFlash 220ms linear infinite;\n }\n @keyframes dangerFlash{0%{filter:brightness(1);}50%{filter:brightness(1.6);}100%{filter:brightness(1);}}\n\n \/* ====== Daily Double overlay + sparkles ====== *\/\n .daily-double-overlay{\n position:absolute; inset:0;\n display:none;\n align-items:center; justify-content:center;\n z-index:40;\n border-radius:10px;\n background: radial-gradient(circle at center, rgba(0,240,255,0.25), rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.95) 100%);\n backdrop-filter: blur(2px);\n }\n .daily-double-overlay.show{display:flex;animation: ddFade 1.4s ease-out forwards;}\n .daily-double-card{\n text-align:center;\n padding:18px 22px;\n border-radius:16px;\n border:1px solid rgba(0,240,255,0.55);\n background: rgba(5, 15, 40, 0.75);\n box-shadow: 0 0 25px rgba(0,240,255,0.35), 0 0 60px rgba(0,255,180,0.18);\n transform: translateY(10px) scale(0.96);\n animation: ddPop 1.1s ease-out forwards;\n }\n .daily-double-title{\n font-size: 40px;\n letter-spacing: 4px;\n font-family: 'Impact', system-ui, sans-serif;\n text-shadow: 0 0 12px rgba(0,240,255,0.9), 0 0 28px rgba(0,255,180,0.6);\n }\n .daily-double-sub{margin-top:6px;font-size:14px;color:rgba(255,255,255,0.9);letter-spacing:1px;}\n @keyframes ddFade{0%{opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}\n @keyframes ddPop{0%{transform:translateY(16px) scale(0.92);}18%{transform:translateY(0) scale(1.04);}100%{transform:translateY(0) scale(1);}}\n\n .sparkle-layer{position:absolute; inset:0; pointer-events:none; z-index:41; overflow:hidden; border-radius:10px;}\n .sparkle{\n position:absolute; font-size:26px; opacity:0;\n animation: sparklePop 900ms ease-out forwards;\n filter: drop-shadow(0 0 10px rgba(255,221,60,0.45));\n }\n @keyframes sparklePop{\n 0%{transform:translateY(30px) scale(0.6) rotate(-10deg);opacity:0;}\n 15%{opacity:1;}\n 60%{opacity:1;}\n 100%{transform:translateY(-70px) scale(1.25) rotate(15deg);opacity:0;}\n }\n\n \/* ====== Jeopardy Board View ====== *\/\n .board{\n display:none;\n width:100%;\n margin: 12px auto 0;\n max-width: 900px;\n z-index:10;\n position:relative;\n }\n .board-grid{\n display:grid;\n grid-template-columns: repeat(6, 1fr);\n gap:10px;\n }\n .board-cat{\n background: rgba(0,240,255,0.12);\n border:1px solid rgba(0,240,255,0.25);\n border-radius:12px;\n padding:10px;\n font-weight:900;\n text-transform:uppercase;\n letter-spacing:1px;\n font-size:12px;\n text-align:center;\n min-height:54px;\n display:flex;align-items:center;justify-content:center;\n }\n .cell{\n background: rgba(5,15,40,0.9);\n border:1px solid rgba(0,240,255,0.28);\n border-radius:12px;\n padding:12px 8px;\n text-align:center;\n font-weight:900;\n font-size:18px;\n color: var(--gold);\n cursor:pointer;\n user-select:none;\n min-height:56px;\n display:flex;align-items:center;justify-content:center;\n transition: transform .12s ease, background .12s ease;\n touch-action: manipulation;\n }\n .cell:hover{transform: translateY(-1px); background: rgba(10,35,80,0.92);}\n .cell.used{opacity:0.35; pointer-events:none; filter: grayscale(0.4);}\n .board-footer{\n display:flex;gap:10px;justify-content:center;flex-wrap:wrap;\n margin-top:12px;\n }\n\n \/* ====== Team panel ====== *\/\n .remote-control{\n width:min(320px, 100%);\n background: radial-gradient(circle at top, rgba(35,37,75,0.95), rgba(5,6,19,0.98));\n border-radius:18px;\n padding:14px;\n box-shadow:0 15px 30px rgba(0,0,0,0.8);\n border:1px solid rgba(255,255,255,0.08);\n }\n .panel-title{\n font-weight:900;\n letter-spacing:2px;\n font-size:12px;\n color:rgba(255,255,255,0.85);\n text-transform:uppercase;\n text-align:center;\n margin-bottom:10px;\n }\n .team-list{display:flex;flex-direction:column;gap:10px;}\n .team{\n background: rgba(5,15,40,0.65);\n border:1px solid rgba(0,240,255,0.18);\n border-radius:14px;\n padding:10px;\n display:flex;\n justify-content:space-between;\n align-items:center;\n gap:10px;\n }\n .team-left{display:flex;flex-direction:column;gap:4px;}\n .team-name{\n font-weight:900;\n font-size:13px;\n letter-spacing:1px;\n }\n .team-score{font-weight:900;color:var(--gold);font-size:14px;}\n .team-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}\n .mini{\n border:none;\n background: rgba(0,240,255,0.20);\n color:#fff;\n border:1px solid rgba(0,240,255,0.22);\n padding:6px 9px;\n border-radius:999px;\n cursor:pointer;\n font-weight:900;\n font-size:12px;\n user-select:none;\n touch-action: manipulation;\n }\n .mini:hover{transform: translateY(-1px);}\n .mini.gold{background: rgba(255,221,60,0.18); border-color: rgba(255,221,60,0.25);}\n .mini.danger{background: rgba(255,75,110,0.18); border-color: rgba(255,75,110,0.28);}\n\n .buzzbox{\n margin-top:12px;\n padding-top:12px;\n border-top:1px solid rgba(255,255,255,0.08);\n }\n .buzz-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}\n .buzz{\n width:70px;height:44px;\n border-radius:14px;\n border:1px solid rgba(0,240,255,0.25);\n background: radial-gradient(circle at 30% 30%, rgba(65,69,119,0.9), rgba(17,19,41,0.95));\n color:#fff;\n font-weight:900;\n cursor:pointer;\n user-select:none;\n touch-action: manipulation;\n }\n .buzz.active{\n outline:2px solid rgba(255,221,60,0.6);\n box-shadow:0 0 18px rgba(255,221,60,0.25);\n }\n .smallnote{margin-top:8px;font-size:12px;color:rgba(255,255,255,0.72);text-align:center;line-height:1.35;}\n\n \/* ====== Modal (question display for board + final jeopardy) ====== *\/\n .modal{\n position:absolute; inset:0;\n display:none;\n align-items:center; justify-content:center;\n z-index:50;\n background: rgba(0,0,0,0.75);\n backdrop-filter: blur(2px);\n border-radius:10px;\n padding:14px;\n }\n .modal.show{display:flex;}\n .modal-card{\n width:min(860px, 100%);\n background: rgba(5,15,40,0.92);\n border:1px solid rgba(0,240,255,0.32);\n border-radius:16px;\n padding:16px;\n box-shadow: 0 15px 40px rgba(0,0,0,0.7);\n position:relative;\n }\n .modal-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;}\n .modal-meta{\n display:flex;gap:8px;flex-wrap:wrap;\n }\n .tag{\n background: rgba(0,240,255,0.14);\n border:1px solid rgba(0,240,255,0.22);\n color:#fff;\n padding:4px 10px;\n border-radius:999px;\n font-size:12px;\n font-weight:900;\n }\n .tag.gold{background: rgba(255,221,60,0.14); border-color: rgba(255,221,60,0.22);}\n .tag.danger{background: rgba(255,75,110,0.14); border-color: rgba(255,75,110,0.24);}\n .modal-q{margin-top:10px;font-size:22px;text-align:center;line-height:1.35;}\n .modal-a{margin-top:10px;font-size:18px;text-align:center;color:var(--gold);font-weight:900;display:none;}\n .modal-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px;}\n\n \/* ====== News ticker ====== *\/\n .news-ticker{\n position:absolute; bottom:0; left:0; right:0;\n height:30px;\n background: rgba(24,18,58,0.95);\n border-top:1px solid rgba(255,255,255,0.10);\n display:flex; align-items:center;\n overflow:hidden;\n border-radius:0 0 10px 10px;\n z-index:25;\n }\n .news-label{\n background: rgba(48,28,108,0.95);\n padding:0 15px; height:100%;\n display:flex; align-items:center;\n font-size:12px; font-weight:900;\n white-space:nowrap;\n letter-spacing:1px;\n }\n .news-content{\n white-space:nowrap;\n animation: ticker 35s linear infinite;\n padding-left: 20px;\n font-size:12px;\n font-weight:900;\n color: rgba(255,255,255,0.9);\n }\n @keyframes ticker{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}\n\n \/* ====== Mobile tuning ====== *\/\n @media (max-width: 720px){\n .tv-screen{min-height: 640px; padding:14px;}\n .title{font-size:28px;}\n .question{font-size:20px;}\n .choices{grid-template-columns: 1fr; gap:10px;}\n .choice-btn{min-height:54px;}\n .board-grid{gap:8px;}\n .cell{font-size:16px; min-height:52px;}\n .board-cat{font-size:11px; min-height:50px;}\n .top-right{min-width: 180px;}\n .modebar{top:64px;}\n }\n <\/style>\n<\/head>\n\n<body data-skin=\"ethiotrivia\">\n <div class=\"content-wrapper\">\n <!-- ===================== TV ===================== -->\n <div class=\"tv-container\">\n <div class=\"flat-screen-tv\">\n <div class=\"tv-bezel\">\n <div class=\"yebbo-logo\" id=\"brandLogo\">YEBBO <small id=\"brandSub\">ETHIO TRIVIA<\/small><\/div>\n\n <div class=\"top-right\">\n <div class=\"time\" id=\"current-time\">Loading…<\/div>\n <div class=\"pillrow\">\n <div class=\"pill\" id=\"score\">Score: 0<\/div>\n <div class=\"pill\" id=\"level\">Level 1<\/div>\n <div class=\"pill\" id=\"streak\">Streak: 0 (x1)<\/div>\n <div class=\"pill\" id=\"timer\" style=\"display:none;\">\u23f1 7s<\/div>\n <div class=\"pill\" id=\"daily-double-badge\" style=\"display:none;\">\ud83c\udfaf DAILY DOUBLE!<\/div>\n <\/div>\n <div class=\"pillrow\">\n <div class=\"pill\" id=\"langPill\">Language: EN<\/div>\n <div class=\"pill\" id=\"modePill\">Mode: ARCADE<\/div>\n <\/div>\n <\/div>\n\n <div class=\"modebar\">\n <div class=\"chip active\" id=\"chipArcade\">Arcade<\/div>\n <div class=\"chip\" id=\"chipBoard\">Jeopardy Board<\/div>\n <div class=\"chip\" id=\"chipFinal\">Final Jeopardy<\/div>\n <div class=\"chip\" id=\"chipLeaderboard\">Leaderboard<\/div>\n <\/div>\n\n <div class=\"tv-screen\">\n <div class=\"screen-reflections\"><\/div>\n <div class=\"tv-frame-decoration\"><\/div>\n\n <!-- DAILY DOUBLE FX -->\n <div class=\"daily-double-overlay\" id=\"daily-double-overlay\">\n <div class=\"daily-double-card\">\n <div class=\"daily-double-title\">DAILY DOUBLE<\/div>\n <div class=\"daily-double-sub\">2\u00d7 points \u2014 make it count!<\/div>\n <\/div>\n <\/div>\n <div class=\"sparkle-layer\" id=\"sparkle-layer\"><\/div>\n\n <div class=\"main\">\n <div class=\"title\" id=\"mainTitle\">QUIZ QUEST<\/div>\n <div class=\"subtitle\" id=\"mainSubtitle\">Arcade \u2022 Board \u2022 Teams \u2022 Final \u2022 Leaderboard<\/div>\n\n <!-- ============ ARCADE VIEW ============ -->\n <div id=\"arcadeView\">\n <div style=\"text-align:center;\">\n <div class=\"question-number\" id=\"qNumber\">Question 1<\/div>\n <\/div>\n\n <div class=\"category\" id=\"category\">Ethiopia Basics<\/div>\n\n <!-- HARD TIMER -->\n <div class=\"hard-timer-wrap\" id=\"hard-timer-wrap\">\n <div class=\"hard-timer-bar\" id=\"hard-timer-bar\"><\/div>\n <\/div>\n\n <div class=\"question\" id=\"question\">Loading question…<\/div>\n <div class=\"answer\" id=\"answer\">Answer<\/div>\n\n <div class=\"choices\" id=\"choices-container\"><\/div>\n\n <div class=\"tts-controls\">\n <button class=\"tts-btn\" id=\"read-question\">\ud83c\udf99 Read Question<\/button>\n <button class=\"tts-btn\" id=\"read-answer\">\ud83c\udf99 Read Answer<\/button>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"btn\" id=\"reveal-btn\">Reveal Answer<\/button>\n <button class=\"btn secondary\" id=\"next-btn\">Next \u25b6<\/button>\n <button class=\"btn danger\" id=\"switch-lang-btn\">Toggle Language<\/button>\n <\/div>\n <\/div>\n\n <!-- ============ BOARD VIEW ============ -->\n <div class=\"board\" id=\"boardView\">\n <div class=\"board-grid\" id=\"boardGrid\"><\/div>\n <div class=\"board-footer\">\n <button class=\"btn\" id=\"boardReset\">New Board<\/button>\n <button class=\"btn secondary\" id=\"boardToggleLang\">Toggle Language<\/button>\n <\/div>\n <\/div>\n\n <!-- ============ FINAL JEOPARDY VIEW ============ -->\n <div class=\"board\" id=\"finalView\" style=\"display:none;\">\n <div style=\"text-align:center;margin:10px 0 12px;\">\n <div class=\"category\" style=\"margin:0;\" id=\"finalCategory\">FINAL JEOPARDY<\/div>\n <div class=\"subtitle\" id=\"finalHint\">Each team sets a wager, then reveal the clue.<\/div>\n <\/div>\n\n <div class=\"modal-card\" style=\"max-width:900px;margin:0 auto;\">\n <div class=\"modal-top\">\n <div class=\"modal-meta\">\n <div class=\"tag gold\" id=\"finalTag\">FINAL \u2022 WAGER<\/div>\n <div class=\"tag\" id=\"finalLangTag\">EN<\/div>\n <\/div>\n <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n <button class=\"btn\" id=\"finalPick\">Pick Final Question<\/button>\n <button class=\"btn secondary\" id=\"finalReveal\">Reveal Final<\/button>\n <button class=\"btn danger\" id=\"finalToggleLang\">Toggle Language<\/button>\n <\/div>\n <\/div>\n\n <div style=\"margin-top:12px;display:grid;gap:10px;\">\n <div style=\"display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;\" id=\"wagerGrid\"><\/div>\n <\/div>\n\n <div class=\"modal-q\" id=\"finalQ\" style=\"margin-top:14px;\">Click \u201cPick Final Question\u201d.<\/div>\n <div class=\"modal-a\" id=\"finalA\">Final Answer<\/div>\n\n <div class=\"modal-controls\">\n <button class=\"btn\" id=\"finalMarkCorrect\">Mark Correct (Active Team)<\/button>\n <button class=\"btn danger\" id=\"finalMarkWrong\">Mark Wrong (Active Team)<\/button>\n <button class=\"btn secondary\" id=\"finalNextTeam\">Next Team \u25b6<\/button>\n <\/div>\n\n <div class=\"smallnote\" style=\"margin-top:10px;\">\n Tip: Select an \u201cActive Team\u201d by buzzing (buttons 1\u20134). Wager applies per team.\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ============ LEADERBOARD VIEW ============ -->\n <div class=\"board\" id=\"leaderboardView\" style=\"display:none;\">\n <div class=\"modal-card\" style=\"max-width:900px;margin:0 auto;\">\n <div class=\"modal-top\">\n <div class=\"modal-meta\">\n <div class=\"tag gold\">LEADERBOARD<\/div>\n <div class=\"tag\" id=\"lbCount\">0 entries<\/div>\n <\/div>\n <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n <button class=\"btn\" id=\"saveScoreBtn\">Save Score<\/button>\n <button class=\"btn danger\" id=\"clearLBBtn\">Clear<\/button>\n <\/div>\n <\/div>\n\n <div style=\"margin-top:12px;overflow:auto;\">\n <table style=\"width:100%;border-collapse:collapse;\">\n <thead>\n <tr>\n <th style=\"text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,0.12);\">Rank<\/th>\n <th style=\"text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,0.12);\">Name<\/th>\n <th style=\"text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,0.12);\">Score<\/th>\n <th style=\"text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,0.12);\">Mode<\/th>\n <th style=\"text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,0.12);\">When<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"lbBody\"><\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"smallnote\" style=\"margin-top:10px;\">\n Stored locally in your browser (LocalStorage).\n <\/div>\n <\/div>\n <\/div>\n\n <!-- BOARD QUESTION MODAL -->\n <div class=\"modal\" id=\"modal\">\n <div class=\"modal-card\">\n <div class=\"modal-top\">\n <div class=\"modal-meta\" id=\"modalMeta\"><\/div>\n <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n <button class=\"btn\" id=\"modalReveal\">Reveal<\/button>\n <button class=\"btn secondary\" id=\"modalCorrect\">Correct (Active Team)<\/button>\n <button class=\"btn danger\" id=\"modalWrong\">Wrong (Active Team)<\/button>\n <button class=\"btn\" id=\"modalClose\">Close<\/button>\n <\/div>\n <\/div>\n <div class=\"hard-timer-wrap\" id=\"modalHardWrap\" style=\"display:none;max-width:100%;\">\n <div class=\"hard-timer-bar\" id=\"modalHardBar\"><\/div>\n <\/div>\n <div class=\"modal-q\" id=\"modalQ\"><\/div>\n <div class=\"modal-a\" id=\"modalA\"><\/div>\n <div class=\"smallnote\" style=\"margin-top:10px;\">\n Buzz to pick Active Team: 1\u20134 keys, or click the Buzz buttons. Award\/penalize goes to Active Team.\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"news-ticker\">\n <div class=\"news-label\">GAME FEED<\/div>\n <div class=\"news-content\" id=\"news-content\">\n TIP: Buzz teams with 1\u20134 \u2022 SPACE reveals \u2022 RIGHT ARROW next (Arcade) \u2022 Hard: 7s timer \u2022 Daily Double: 2\u00d7 points \u2022 Streak: 3=1.5\u00d7, 5=2\u00d7 \u2022 Powered by YEBBO.COM\n <\/div>\n <\/div>\n <\/div>\n\n <div style=\"margin-top:12px;padding:10px;border-radius:12px;background:rgba(9,11,25,0.9);border:1px solid rgba(255,255,255,0.08);text-align:center;\">\n <div style=\"color:var(--gold);font-weight:900;font-size:14px;\">\n YEBBO.COM \u2014 Turn learning into a video game \u2022 EthioTrivia Edition\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ===================== REMOTE \/ TEAMS ===================== -->\n <div class=\"remote-control\">\n <div class=\"panel-title\">Teams \u2022 Buzz-in \u2022 Skins<\/div>\n\n <div style=\"display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;\">\n <button class=\"mini\" id=\"skinYebbo\">Yebbo<\/button>\n <button class=\"mini\" id=\"skinSports\">YebboSports<\/button>\n <button class=\"mini\" id=\"skinAcademy\">YebboAcademy<\/button>\n <button class=\"mini gold\" id=\"skinEthio\">EthioTrivia<\/button>\n <\/div>\n\n <div class=\"team-list\" id=\"teamList\"><\/div>\n\n <div class=\"buzzbox\">\n <div class=\"panel-title\" style=\"margin-bottom:8px;\">Buzz (Active Team)<\/div>\n <div class=\"buzz-row\">\n <button class=\"buzz\" data-team=\"0\">TEAM 1<\/button>\n <button class=\"buzz\" data-team=\"1\">TEAM 2<\/button>\n <button class=\"buzz\" data-team=\"2\">TEAM 3<\/button>\n <button class=\"buzz\" data-team=\"3\">TEAM 4<\/button>\n <\/div>\n <div class=\"smallnote\">\n Keyboard: 1\u20134 sets Active Team \u2022 Team scores apply in Board + Final modes too.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ============================================================\n \/\/ CORE DATA: 1000 Ethiopian-theme questions w\/ difficulty + points\n \/\/ plus bilingual support (some Amharic included; fallback to EN)\n \/\/ ============================================================\n\n function buildEthiopiaQuestions(targetCount = 1000) {\n const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];\n const shuffle = (array) => {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n };\n const norm = (s) => s.trim().toLowerCase().replace(\/\\s+\/g, \" \");\n\n \/\/ Difficulty \u2192 points scale\n const DIFF_POINTS = {\n Easy: [100, 200],\n Medium: [200, 300, 400],\n Hard: [400, 500]\n };\n\n function assignDifficultyAndPoints(q) {\n const cat = norm(q.category);\n const text = norm(q.question);\n\n let difficulty = \"Medium\";\n\n \/\/ Easy\n if (cat.includes(\"basics\") || cat.includes(\"101\") || cat.includes(\"food\") || cat.includes(\"cities\") || text.includes(\"capital\") || text.includes(\"injera\") || text.includes(\"coffee\")) {\n difficulty = \"Easy\";\n }\n \/\/ Hard\n if (cat.includes(\"wildlife\") || cat.includes(\"calendar\") || cat.includes(\"script\") || cat.includes(\"writing\") || text.includes(\"endemic\") || text.includes(\"danakil\") || text.includes(\"erta ale\") || text.includes(\"stelae\") || text.includes(\"obelisks\")) {\n difficulty = \"Hard\";\n }\n\n const points = pick(DIFF_POINTS[difficulty]);\n return { ...q, difficulty, points };\n }\n\n const pools = {\n places: [\n { name: \"Addis Ababa\", hint: \"Ethiopia\u2019s capital city\", am: \"\u12a0\u12f2\u1235 \u12a0\u1260\u1263\" },\n { name: \"Gondar\", hint: \"A historic city known for its castles\", am: \"\u130e\u1295\u12f0\u122d\" },\n { name: \"Lalibela\", hint: \"Famous for rock-hewn churches\", am: \"\u120b\u120a\u1260\u120b\" },\n { name: \"Axum (Aksum)\", hint: \"An ancient city known for stelae\", am: \"\u12a0\u12ad\u1231\u121d\" },\n { name: \"Bahir Dar\", hint: \"A city near Lake Tana\", am: \"\u1263\u1205\u122d \u12f3\u122d\" },\n { name: \"Harar\", hint: \"A walled city known for its old quarters\", am: \"\u1210\u1228\u122d\" },\n { name: \"Dire Dawa\", hint: \"A major city in eastern Ethiopia\", am: \"\u12f5\u122c\u12f3\u12cb\" },\n { name: \"Jimma\", hint: \"Associated with coffee-growing regions\", am: \"\u1305\u121b\" },\n { name: \"Mekelle\", hint: \"A major city in northern Ethiopia\", am: \"\u1218\u1240\u120c\" },\n { name: \"Adama (Nazret)\", hint: \"A major city southeast of Addis Ababa\", am: \"\u12a0\u12f3\u121b\" }\n ],\n regions: [\n { en:\"Oromia\", am:\"\u12a6\u122e\u121a\u12eb\" },\n { en:\"Amhara\", am:\"\u12a0\u121b\u122b\" },\n { en:\"Tigray\", am:\"\u1275\u130d\u122b\u12ed\" },\n { en:\"Somali\", am:\"\u1236\u121b\u120c\" },\n { en:\"Afar\", am:\"\u12a0\u134b\u122d\" },\n { en:\"Sidama\", am:\"\u1232\u12f3\u121b\" },\n { en:\"Benishangul-Gumuz\", am:\"\u1264\u1295\u123b\u1295\u1309\u120d-\u1309\u1219\u12dd\" },\n { en:\"Gambela\", am:\"\u130b\u121d\u1264\u120b\" }\n ],\n landmarks: [\n { name: \"Rock-hewn churches of Lalibela\", category: \"Heritage & Wonders\" },\n { name: \"Fasil Ghebbi (Gondar castles)\", category: \"Heritage & Wonders\" },\n { name: \"Simien Mountains\", category: \"Nature & Landscapes\" },\n { name: \"Lake Tana\", category: \"Nature & Landscapes\" },\n { name: \"Blue Nile Falls (Tis Issat)\", category: \"Nature & Landscapes\" },\n { name: \"Danakil Depression\", category: \"Nature & Landscapes\" },\n { name: \"Erta Ale\", category: \"Nature & Landscapes\" },\n { name: \"Axum stelae\", category: \"Heritage & Wonders\" },\n { name: \"Harar Jugol (old walled city)\", category: \"Heritage & Wonders\" }\n ],\n foods: [\n { name: \"injera\", clue: \"A sourdough flatbread traditionally made from teff\", am: \"\u12a5\u1295\u1300\u122b\" },\n { name: \"doro wat\", clue: \"A spicy chicken stew often served on injera\", am: \"\u12f6\u122e \u12c8\u1325\" },\n { name: \"shiro\", clue: \"A seasoned stew often made from ground legumes\", am: \"\u123d\u122e\" },\n { name: \"kitfo\", clue: \"A dish of minced meat, often seasoned with spiced butter\", am: \"\u12ad\u1275\u134e\" },\n { name: \"tibs\", clue: \"Saut\u00e9ed meat dish, often served sizzling\", am: \"\u1325\u1265\u1235\" },\n { name: \"genfo\", clue: \"A thick porridge-like dish often eaten for breakfast\", am: \"\u1308\u1295\u134e\" },\n { name: \"tej\", clue: \"Traditional honey wine\", am: \"\u1320\u1305\" }\n ],\n culture: [\n { name: \"eskista\", clue: \"A dance style known for shoulder movements\", am:\"\u12a5\u1235\u12ad\u1235\u1273\" },\n { name: \"Timket\", clue: \"Epiphany celebration in Ethiopian Orthodox tradition\", am:\"\u1325\u121d\u1240\u1275\" },\n { name: \"Meskel\", clue: \"Festival commemorating the finding of the True Cross\", am:\"\u1218\u1235\u1240\u120d\" },\n { name: \"Enkutatash\", clue: \"Ethiopian New Year\", am:\"\u12a5\u1295\u1241\u1323\u1323\u123d\" }\n ],\n sports: [\n { name: \"Haile Gebrselassie\", clue: \"Legendary Ethiopian long-distance runner\" },\n { name: \"Kenenisa Bekele\", clue: \"Ethiopian distance runner known for track and cross-country dominance\" },\n { name: \"Derartu Tulu\", clue: \"Ethiopian runner; among the first Ethiopian women to win Olympic gold\" },\n { name: \"Tirunesh Dibaba\", clue: \"Ethiopian distance runner nicknamed a dominant champion\" }\n ],\n wildlife: [\n { name: \"Ethiopian wolf\", clue: \"A rare canid found in Ethiopian highlands\" },\n { name: \"Gelada\", clue: \"A primate known for its red chest patch\" },\n { name: \"Walia ibex\", clue: \"An endemic mountain goat found in northern highlands\" }\n ],\n writing: [\n { name: \"Ge\u02bdez (Ethiopic) script\", clue: \"The writing system used for Amharic and Tigrinya\", am:\"\u130d\u12d5\u12dd \u134a\u12f0\u120d\" }\n ],\n calendar: [\n { name: \"13\", clue: \"Number of months in the Ethiopian calendar\", am:\"13\" }\n ]\n };\n\n const curated = [\n { category:\"Ethiopia Basics\", question:\"This city is Ethiopia\u2019s capital.\", answer:\"What is Addis Ababa?\", questionAm:\"\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u12cb\u1293 \u12a8\u1270\u121b \u12ed\u1205\u127d \u1293\u1275\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd \u12a0\u12f2\u1235 \u12a0\u1260\u1263?\" },\n { category:\"Food & Drink\", question:\"This sourdough flatbread is a staple in Ethiopia.\", answer:\"What is injera?\", questionAm:\"\u1260\u12a2\u1275\u12ee\u1335\u12eb \u1270\u1208\u1218\u12f0 \u12e8\u1206\u1290 \u12e8\u1270\u1348\u120b \u12f3\u1266 \u12ed\u1205 \u1290\u12cd\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd \u12a5\u1295\u1300\u122b?\" },\n { category:\"Food & Drink\", question:\"This tiny grain is famously used to make injera.\", answer:\"What is teff?\", questionAm:\"\u12a5\u1295\u1300\u122b \u1208\u121b\u12d8\u130b\u1300\u1275 \u1260\u1323\u121d \u12e8\u121a\u1273\u12c8\u1240\u12cd \u1275\u1295\u123d \u12a5\u1205\u120d \u12ed\u1205 \u1290\u12cd\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd \u1324\u134d?\" },\n { category:\"Festivals\", question:\"This Ethiopian Orthodox celebration is known as Epiphany.\", answer:\"What is Timket?\", questionAm:\"\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u12a6\u122d\u1276\u12f6\u12ad\u1235 \u12a4\u1352\u134b\u1292 \u1260\u12da\u1205 \u1235\u121d \u12ed\u1273\u12c8\u1243\u120d\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd \u1325\u121d\u1240\u1275?\" },\n { category:\"Writing & Script\", question:\"This writing system is used for Amharic.\", answer:\"What is the Ge\u02bdez (Ethiopic) script?\", questionAm:\"\u12a0\u121b\u122d\u129b \u12e8\u121a\u133b\u134d\u1260\u1275 \u134a\u12f0\u120d \u12ed\u1205 \u1290\u12cd\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd \u130d\u12d5\u12dd \u134a\u12f0\u120d?\" },\n { category:\"Nature & Landscapes\", question:\"This region is known for extreme heat and salt flats in northeastern Ethiopia.\", answer:\"What is the Danakil Depression?\" },\n { category:\"Wildlife\", question:\"This rare canid is found in Ethiopia\u2019s highlands.\", answer:\"What is the Ethiopian wolf?\" },\n { category:\"Ethiopian Sports Legends\", question:\"This legendary Ethiopian runner is famous for long-distance greatness.\", answer:\"Who is Haile Gebrselassie?\" },\n { category:\"Calendar\", question:\"The Ethiopian calendar has this many months.\", answer:\"What is 13?\", questionAm:\"\u12e8\u12a2\u1275\u12ee\u1335\u12eb \u12d8\u1218\u1295 \u1246\u1320\u122b \u12ed\u1205\u1295 \u1265\u12db\u1275 \u12c8\u122b\u1275 \u12a0\u1208\u12cd\u1362\", answerAm:\"\u121d\u1295\u12f5\u1295 \u1290\u12cd 13?\" }\n ];\n\n const templates = [\n () => {\n const p = pick(pools.places);\n return {\n category:\"Cities of Ethiopia\",\n question:`Clue: ${p.hint}.`,\n answer:`What is ${p.name}?`,\n questionAm:`\u1218\u1228\u1303: ${p.hint}.`,\n answerAm: p.am ? `\u121d\u1295\u12f5\u1295 \u1290\u12cd ${p.am}?` : null\n };\n },\n () => {\n const r = pick(pools.regions);\n return {\n category:\"Regions\",\n question:`This is one of Ethiopia\u2019s regional states\/regions: ${r.en}.`,\n answer:`What is ${r.en}?`,\n questionAm:`\u12ed\u1205 \u12a8\u12a2\u1275\u12ee\u1335\u12eb \u12ad\u120d\u120e\u127d \u12a0\u1295\u12f1 \u1290\u12cd\u1366 ${r.am}.`,\n answerAm:`\u121d\u1295\u12f5\u1295 \u1290\u12cd ${r.am}?`\n };\n },\n () => {\n const l = pick(pools.landmarks);\n return { category:l.category, question:`This Ethiopian landmark is a famous destination: ${l.name}.`, answer:`What is ${l.name}?` };\n },\n () => {\n const f = pick(pools.foods);\n return {\n category:\"Food & Drink\",\n question:`Ethiopian cuisine clue: ${f.clue}.`,\n answer:`What is ${f.name}?`,\n questionAm:`\u1218\u1228\u1303 (\u121d\u130d\u1265): ${f.clue}.`,\n answerAm: f.am ? `\u121d\u1295\u12f5\u1295 \u1290\u12cd ${f.am}?` : null\n };\n },\n () => {\n const c = pick(pools.culture);\n return {\n category:\"Culture & Festivals\",\n question:`Culture clue: ${c.clue}.`,\n answer:`What is ${c.name}?`,\n questionAm:`\u1218\u1228\u1303 (\u1263\u1205\u120d): ${c.clue}.`,\n answerAm: c.am ? `\u121d\u1295\u12f5\u1295 \u1290\u12cd ${c.am}?` : null\n };\n },\n () => {\n const s = pick(pools.sports);\n return { category:\"Ethiopian Sports Legends\", question:`Sports clue: ${s.clue}.`, answer:`Who is ${s.name}?` };\n },\n () => {\n const w = pick(pools.wildlife);\n return { category:\"Wildlife\", question:`Endemic\/Highland wildlife clue: ${w.clue}.`, answer:`What is the ${w.name}?` };\n },\n () => {\n const w = pick(pools.writing);\n return {\n category:\"Writing & Script\",\n question:`A writing clue: ${w.clue}.`,\n answer:`What is ${w.name}?`,\n questionAm:`\u1218\u1228\u1303 (\u134a\u12f0\u120d): ${w.clue}.`,\n answerAm: w.am ? `\u121d\u1295\u12f5\u1295 \u1290\u12cd ${w.am}?` : null\n };\n },\n () => {\n const c = pick(pools.calendar);\n return {\n category:\"Ethiopian Calendar\",\n question:`Calendar clue: ${c.clue}.`,\n answer:`What is ${c.name}?`,\n questionAm:`\u1218\u1228\u1303 (\u12d8\u1218\u1295 \u1246\u1320\u122b): ${c.clue}.`,\n answerAm: c.am ? `\u121d\u1295\u12f5\u1295 \u1290\u12cd ${c.am}?` : null\n };\n }\n ];\n\n function assignDifficultyAndPoints(q) {\n const cat = norm(q.category);\n const text = norm(q.question);\n let difficulty = \"Medium\";\n if (cat.includes(\"basics\") || cat.includes(\"101\") || cat.includes(\"food\") || cat.includes(\"cities\") || text.includes(\"capital\") || text.includes(\"injera\") || text.includes(\"coffee\")) difficulty = \"Easy\";\n if (cat.includes(\"wildlife\") || cat.includes(\"calendar\") || cat.includes(\"script\") || cat.includes(\"writing\") || text.includes(\"endemic\") || text.includes(\"danakil\") || text.includes(\"erta ale\") || text.includes(\"stelae\") || text.includes(\"obelisks\")) difficulty = \"Hard\";\n const points = pick(DIFF_POINTS[difficulty]);\n return { ...q, difficulty, points };\n }\n\n const out = [];\n const seen = new Set();\n function pushUnique(q) {\n const key = norm(q.category + \"|\" + q.question + \"|\" + q.answer);\n if (seen.has(key)) return false;\n seen.add(key);\n out.push(assignDifficultyAndPoints(q));\n return true;\n }\n\n curated.forEach(pushUnique);\n\n let safety = 0;\n while (out.length < targetCount && safety < targetCount * 80) {\n safety++;\n pushUnique(pick(templates)());\n }\n\n \/\/ final shuffle\n for (let i = out.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [out[i], out[j]] = [out[j], out[i]];\n }\n return out.slice(0, targetCount);\n }\n\n const questions = buildEthiopiaQuestions(1000);\n\n \/\/ ============================================================\n \/\/ APP\n \/\/ ============================================================\n document.addEventListener(\"DOMContentLoaded\", () => {\n \/\/ ====== DOM ======\n const body = document.body;\n\n const brandLogo = document.getElementById(\"brandLogo\");\n const brandSub = document.getElementById(\"brandSub\");\n\n const timeEl = document.getElementById(\"current-time\");\n const scoreEl = document.getElementById(\"score\");\n const levelEl = document.getElementById(\"level\");\n const streakEl = document.getElementById(\"streak\");\n const timerEl = document.getElementById(\"timer\");\n const dailyDoubleBadge = document.getElementById(\"daily-double-badge\");\n const langPill = document.getElementById(\"langPill\");\n const modePill = document.getElementById(\"modePill\");\n\n const chipArcade = document.getElementById(\"chipArcade\");\n const chipBoard = document.getElementById(\"chipBoard\");\n const chipFinal = document.getElementById(\"chipFinal\");\n const chipLeaderboard = document.getElementById(\"chipLeaderboard\");\n\n const arcadeView = document.getElementById(\"arcadeView\");\n const boardView = document.getElementById(\"boardView\");\n const finalView = document.getElementById(\"finalView\");\n const leaderboardView = document.getElementById(\"leaderboardView\");\n\n const qNumberEl = document.getElementById(\"qNumber\");\n const categoryEl = document.getElementById(\"category\");\n const questionEl = document.getElementById(\"question\");\n const answerEl = document.getElementById(\"answer\");\n const choicesContainer = document.getElementById(\"choices-container\");\n const revealBtn = document.getElementById(\"reveal-btn\");\n const nextBtn = document.getElementById(\"next-btn\");\n const readQuestionBtn = document.getElementById(\"read-question\");\n const readAnswerBtn = document.getElementById(\"read-answer\");\n const switchLangBtn = document.getElementById(\"switch-lang-btn\");\n\n const hardTimerWrap = document.getElementById(\"hard-timer-wrap\");\n const hardTimerBar = document.getElementById(\"hard-timer-bar\");\n\n const ddOverlay = document.getElementById(\"daily-double-overlay\");\n const sparkleLayer = document.getElementById(\"sparkle-layer\");\n\n const boardGrid = document.getElementById(\"boardGrid\");\n const boardReset = document.getElementById(\"boardReset\");\n const boardToggleLang = document.getElementById(\"boardToggleLang\");\n\n const modal = document.getElementById(\"modal\");\n const modalMeta = document.getElementById(\"modalMeta\");\n const modalQ = document.getElementById(\"modalQ\");\n const modalA = document.getElementById(\"modalA\");\n const modalReveal = document.getElementById(\"modalReveal\");\n const modalCorrect = document.getElementById(\"modalCorrect\");\n const modalWrong = document.getElementById(\"modalWrong\");\n const modalClose = document.getElementById(\"modalClose\");\n const modalHardWrap = document.getElementById(\"modalHardWrap\");\n const modalHardBar = document.getElementById(\"modalHardBar\");\n\n \/\/ Final jeopardy\n const wagerGrid = document.getElementById(\"wagerGrid\");\n const finalPick = document.getElementById(\"finalPick\");\n const finalReveal = document.getElementById(\"finalReveal\");\n const finalToggleLang = document.getElementById(\"finalToggleLang\");\n const finalQ = document.getElementById(\"finalQ\");\n const finalA = document.getElementById(\"finalA\");\n const finalLangTag = document.getElementById(\"finalLangTag\");\n const finalMarkCorrect = document.getElementById(\"finalMarkCorrect\");\n const finalMarkWrong = document.getElementById(\"finalMarkWrong\");\n const finalNextTeam = document.getElementById(\"finalNextTeam\");\n\n \/\/ Leaderboard\n const lbBody = document.getElementById(\"lbBody\");\n const lbCount = document.getElementById(\"lbCount\");\n const saveScoreBtn = document.getElementById(\"saveScoreBtn\");\n const clearLBBtn = document.getElementById(\"clearLBBtn\");\n\n \/\/ Teams\n const teamList = document.getElementById(\"teamList\");\n const buzzButtons = document.querySelectorAll(\".buzz\");\n\n \/\/ Skins\n const skinYebbo = document.getElementById(\"skinYebbo\");\n const skinSports = document.getElementById(\"skinSports\");\n const skinAcademy = document.getElementById(\"skinAcademy\");\n const skinEthio = document.getElementById(\"skinEthio\");\n\n \/\/ ====== STATE ======\n let mode = \"ARCADE\"; \/\/ ARCADE | BOARD | FINAL | LEADERBOARD\n let lang = \"EN\"; \/\/ EN | AM (fallback to EN)\n let soundOn = true;\n\n let currentQuestionIndex = 0;\n let score = 0;\n let streak = 0;\n\n let questionLocked = false;\n let audioCtx = null;\n\n \/\/ Daily Double\n let dailyDoubleIndex = -1;\n let ddFxPlayedForIndex = null;\n\n \/\/ Hard timer (arcade)\n let hardTimedOut = false;\n let hardTimerStartMs = 0;\n let hardTimerTotalMs = 7000;\n let hardTimerUiInterval = null;\n let hardWarned = false;\n\n \/\/ Hard timer (modal)\n let modalTimedOut = false;\n let modalTimerStartMs = 0;\n let modalTimerInterval = null;\n let modalWarned = false;\n\n \/\/ Teams\n const teams = [\n { name:\"Team 1\", score:0, key:\"1\" },\n { name:\"Team 2\", score:0, key:\"2\" },\n { name:\"Team 3\", score:0, key:\"3\" },\n { name:\"Team 4\", score:0, key:\"4\" },\n ];\n let activeTeam = 0;\n\n \/\/ Board data\n const BOARD_POINT_LEVELS = [100,200,300,400,500];\n const BOARD_CATS = [\"Ethiopia Basics\",\"Food & Drink\",\"Heritage & Wonders\",\"Nature & Landscapes\",\"Culture & Festivals\",\"Wildlife\"];\n let boardCells = []; \/\/ 6x5 => question objects\n let boardUsed = new Set();\n\n \/\/ Current modal question (board)\n let modalQuestion = null;\n let modalCellId = null; \/\/ \"c-r\"\n let modalBasePoints = 0;\n\n \/\/ Final Jeopardy\n let finalQuestion = null;\n let finalRevealed = false;\n let wagers = [0,0,0,0];\n\n \/\/ ====== AUDIO HELPERS ======\n function getAudioCtx() {\n if (!audioCtx) {\n const Ctx = window.AudioContext || window.webkitAudioContext;\n if (Ctx) audioCtx = new Ctx();\n }\n return audioCtx;\n }\n function playBeep(freq, durationMs) {\n if (!soundOn) return;\n const ctx = getAudioCtx();\n if (!ctx) return;\n\n const osc = ctx.createOscillator();\n const gain = ctx.createGain();\n osc.connect(gain);\n gain.connect(ctx.destination);\n\n osc.frequency.value = freq;\n gain.gain.setValueAtTime(0.14, ctx.currentTime);\n\n osc.start();\n osc.stop(ctx.currentTime + durationMs \/ 1000);\n }\n function playCorrectSound(){ playBeep(700,120); setTimeout(()=>playBeep(900,160),150); }\n function playWrongSound(){ playBeep(220,260); }\n function playNextSound(){ playBeep(520,120); }\n function playRevealSound(){ playBeep(880,180); setTimeout(()=>playBeep(660,160),200); }\n\n function playDailyDoubleSound(){\n if (!soundOn) return;\n playBeep(220,120);\n setTimeout(()=>playBeep(880,120),130);\n setTimeout(()=>playBeep(990,120),260);\n setTimeout(()=>playBeep(1180,160),390);\n setTimeout(()=>playBeep(740,220),580);\n }\n\n \/\/ ====== SPARKLES ======\n function burstSparkles() {\n if (!sparkleLayer) return;\n sparkleLayer.innerHTML = \"\";\n const emojis = [\"\u2728\",\"\ud83d\udca5\",\"\u2b50\",\"\ud83c\udf1f\",\"\u26a1\"];\n const count = 16;\n for (let i=0;i<count;i++){\n const s=document.createElement(\"div\");\n s.className=\"sparkle\";\n s.textContent=emojis[Math.floor(Math.random()*emojis.length)];\n s.style.left=(8+Math.random()*84)+\"%\";\n s.style.top =(15+Math.random()*65)+\"%\";\n s.style.fontSize=(18+Math.random()*18)+\"px\";\n s.style.animationDelay=(Math.random()*120)+\"ms\";\n sparkleLayer.appendChild(s);\n setTimeout(()=>s.remove(),1000);\n }\n }\n\n function showDailyDoubleFX(){\n ddOverlay.classList.remove(\"show\");\n void ddOverlay.offsetWidth;\n ddOverlay.classList.add(\"show\");\n playDailyDoubleSound();\n burstSparkles();\n }\n\n \/\/ ====== CLOCK ======\n function updateTime(){\n const now=new Date();\n timeEl.textContent = now.toLocaleTimeString();\n }\n updateTime();\n setInterval(updateTime,1000);\n\n \/\/ ====== STREAK MULTIPLIER ======\n function getStreakMultiplier(){\n if (streak >= 5) return 2.0;\n if (streak >= 3) return 1.5;\n return 1.0;\n }\n function updateStreakUI(){\n streakEl.textContent = `Streak: ${streak} (x${getStreakMultiplier()})`;\n }\n\n \/\/ ====== SCORE \/ LEVEL ======\n function updateScore(delta){\n score += delta;\n if (score < 0) score = 0;\n scoreEl.textContent = `Score: ${score}`;\n const level = Math.floor(score \/ 500) + 1;\n levelEl.textContent = `Level ${level}`;\n }\n\n \/\/ ====== TEAMS UI ======\n function renderTeams(){\n teamList.innerHTML = \"\";\n teams.forEach((t, idx) => {\n const row = document.createElement(\"div\");\n row.className = \"team\";\n row.innerHTML = `\n <div class=\"team-left\">\n <div class=\"team-name\">${t.name} ${idx===activeTeam ? \"\u2022 ACTIVE\" : \"\"}<\/div>\n <div class=\"team-score\">${t.score} pts<\/div>\n <\/div>\n <div class=\"team-controls\">\n <button class=\"mini gold\" data-act=\"rename\" data-idx=\"${idx}\">Rename<\/button>\n <button class=\"mini\" data-act=\"add\" data-idx=\"${idx}\">+100<\/button>\n <button class=\"mini danger\" data-act=\"sub\" data-idx=\"${idx}\">-100<\/button>\n <button class=\"mini\" data-act=\"setactive\" data-idx=\"${idx}\">Active<\/button>\n <\/div>\n `;\n teamList.appendChild(row);\n });\n \/\/ buzz button highlight\n buzzButtons.forEach(b => b.classList.remove(\"active\"));\n const activeBuzz = document.querySelector(`.buzz[data-team=\"${activeTeam}\"]`);\n if (activeBuzz) activeBuzz.classList.add(\"active\");\n }\n\n teamList.addEventListener(\"click\", (e)=>{\n const btn = e.target.closest(\"button\");\n if (!btn) return;\n const act = btn.dataset.act;\n const idx = parseInt(btn.dataset.idx,10);\n if (Number.isNaN(idx)) return;\n\n if (act === \"rename\"){\n const n = prompt(\"Team name:\", teams[idx].name);\n if (n && n.trim()) teams[idx].name = n.trim();\n } else if (act === \"add\"){\n teams[idx].score += 100;\n } else if (act === \"sub\"){\n teams[idx].score = Math.max(0, teams[idx].score - 100);\n } else if (act === \"setactive\"){\n setActiveTeam(idx);\n }\n renderTeams();\n renderWagers();\n });\n\n function setActiveTeam(idx){\n activeTeam = idx;\n renderTeams();\n }\n\n \/\/ Buzz buttons\n buzzButtons.forEach(btn=>{\n btn.addEventListener(\"click\", ()=>{\n setActiveTeam(parseInt(btn.dataset.team,10));\n playBeep(880,80);\n });\n });\n\n \/\/ Keyboard buzz\n document.addEventListener(\"keydown\", (e)=>{\n if ([\"1\",\"2\",\"3\",\"4\"].includes(e.key)){\n setActiveTeam(parseInt(e.key,10)-1);\n playBeep(880,80);\n }\n });\n\n \/\/ ====== LANGUAGE ======\n function toggleLanguage(){\n lang = (lang === \"EN\") ? \"AM\" : \"EN\";\n langPill.textContent = `Language: ${lang}`;\n finalLangTag.textContent = lang;\n \/\/ refresh visible view\n if (mode === \"ARCADE\") showArcadeQuestion(currentQuestionIndex);\n if (mode === \"BOARD\" && modal.classList.contains(\"show\")) showModalQuestion(modalQuestion);\n if (mode === \"FINAL\") renderFinalQuestion();\n }\n\n function getQText(q){\n if (lang === \"AM\" && q.questionAm) return q.questionAm;\n return q.question;\n }\n function getAText(q){\n if (lang === \"AM\" && q.answerAm) return q.answerAm;\n return q.answer;\n }\n\n \/\/ ====== DAILY DOUBLE ======\n function pickDailyDouble(){\n dailyDoubleIndex = Math.floor(Math.random()*questions.length);\n ddFxPlayedForIndex = null;\n }\n function isDailyDouble(idx){ return idx === dailyDoubleIndex; }\n\n \/\/ ====== HARD TIMER (Arcade) ======\n function stopHardTimer(){\n if (hardTimerUiInterval) clearInterval(hardTimerUiInterval);\n hardTimerUiInterval = null;\n hardTimerWrap.style.display = \"none\";\n timerEl.style.display = \"none\";\n hardTimerBar.style.width = \"0%\";\n hardWarned = false;\n hardTimerWrap.classList.remove(\"danger\");\n hardTimerBar.classList.remove(\"danger\");\n }\n\n function startHardTimerIfNeeded(q){\n stopHardTimer();\n hardTimedOut = false;\n\n if (q.difficulty !== \"Hard\") return;\n\n hardTimerTotalMs = 7000;\n hardTimerStartMs = Date.now();\n hardWarned = false;\n\n hardTimerWrap.style.display = \"block\";\n timerEl.style.display = \"inline-block\";\n hardTimerBar.style.width = \"100%\";\n timerEl.textContent = \"\u23f1 7s\";\n\n hardTimerUiInterval = setInterval(()=>{\n const elapsed = Date.now() - hardTimerStartMs;\n const remaining = Math.max(0, hardTimerTotalMs - elapsed);\n\n const pct = (remaining \/ hardTimerTotalMs) * 100;\n hardTimerBar.style.width = `${pct}%`;\n const secLeft = Math.ceil(remaining \/ 1000);\n timerEl.textContent = `\u23f1 ${secLeft}s`;\n\n \/\/ last 2 seconds warning\n if (remaining <= 2000 && remaining > 0){\n hardTimerWrap.classList.add(\"danger\");\n hardTimerBar.classList.add(\"danger\");\n if (!hardWarned){\n hardWarned = true;\n if (soundOn){\n playBeep(880,70);\n setTimeout(()=>playBeep(880,70),120);\n setTimeout(()=>playBeep(880,70),240);\n }\n }\n } else {\n hardTimerWrap.classList.remove(\"danger\");\n hardTimerBar.classList.remove(\"danger\");\n }\n\n if (remaining <= 0){\n stopHardTimer();\n hardTimedOut = true;\n revealArcadeAnswer(true);\n }\n }, 80);\n }\n\n \/\/ ====== HARD TIMER (Modal \/ Board) ======\n function stopModalTimer(){\n if (modalTimerInterval) clearInterval(modalTimerInterval);\n modalTimerInterval = null;\n modalHardWrap.style.display = \"none\";\n modalHardBar.style.width = \"0%\";\n modalWarned = false;\n modalHardWrap.classList.remove(\"danger\");\n modalHardBar.classList.remove(\"danger\");\n }\n function startModalTimerIfNeeded(q){\n stopModalTimer();\n modalTimedOut = false;\n if (!q || q.difficulty !== \"Hard\") return;\n\n modalTimerStartMs = Date.now();\n const total = 7000;\n modalWarned = false;\n\n modalHardWrap.style.display = \"block\";\n modalHardBar.style.width = \"100%\";\n\n modalTimerInterval = setInterval(()=>{\n const elapsed = Date.now() - modalTimerStartMs;\n const remaining = Math.max(0, total - elapsed);\n modalHardBar.style.width = `${(remaining\/total)*100}%`;\n\n \/\/ last 2 seconds warning\n if (remaining <= 2000 && remaining > 0){\n modalHardWrap.classList.add(\"danger\");\n modalHardBar.classList.add(\"danger\");\n if (!modalWarned){\n modalWarned = true;\n if (soundOn){\n playBeep(880,70);\n setTimeout(()=>playBeep(880,70),120);\n setTimeout(()=>playBeep(880,70),240);\n }\n }\n } else {\n modalHardWrap.classList.remove(\"danger\");\n modalHardBar.classList.remove(\"danger\");\n }\n\n if (remaining <= 0){\n stopModalTimer();\n modalTimedOut = true;\n \/\/ auto reveal + small penalty to active team\n modalA.style.display = \"block\";\n playWrongSound();\n teams[activeTeam].score = Math.max(0, teams[activeTeam].score - Math.floor(modalBasePoints * 0.25));\n renderTeams();\n }\n }, 80);\n }\n\n \/\/ ====== SMART CHOICES (Arcade) ======\n function buildChoicesForAll(){\n const allByDifficulty = {\n Easy: questions.map((q,i)=>({q,i})).filter(x=>x.q.difficulty===\"Easy\"),\n Medium: questions.map((q,i)=>({q,i})).filter(x=>x.q.difficulty===\"Medium\"),\n Hard: questions.map((q,i)=>({q,i})).filter(x=>x.q.difficulty===\"Hard\")\n };\n const byCatDiff = new Map();\n questions.forEach((q,i)=>{\n const key = `${q.category}||${q.difficulty}`;\n if(!byCatDiff.has(key)) byCatDiff.set(key, []);\n byCatDiff.get(key).push({q,i});\n });\n\n function shuffled(arr){\n const a=arr.slice();\n for(let i=a.length-1;i>0;i--){\n const j=Math.floor(Math.random()*(i+1));\n [a[i],a[j]]=[a[j],a[i]];\n }\n return a;\n }\n function pickWrongs(pool, correct, count){\n const wrongs=[]; const seen=new Set([correct]);\n for(const item of shuffled(pool)){\n const cand=item.q.answer;\n if(!seen.has(cand)){\n wrongs.push(cand); seen.add(cand);\n }\n if(wrongs.length===count) break;\n }\n return wrongs;\n }\n\n for(let i=0;i<questions.length;i++){\n const q=questions[i];\n const correct=q.answer;\n const key=`${q.category}||${q.difficulty}`;\n const pool1=(byCatDiff.get(key)||[]).filter(x=>x.i!==i);\n const pool2=(allByDifficulty[q.difficulty]||[]).filter(x=>x.i!==i);\n const pool3=questions.map((qq,idx)=>({q:qq,i:idx})).filter(x=>x.i!==i);\n\n let wrongs = pickWrongs(pool1, correct, 3);\n if (wrongs.length<3){\n const more = pickWrongs(pool2, correct, 3-wrongs.length).filter(a=>!wrongs.includes(a));\n wrongs = wrongs.concat(more);\n }\n if (wrongs.length<3){\n const more = pickWrongs(pool3, correct, 3-wrongs.length).filter(a=>!wrongs.includes(a));\n wrongs = wrongs.concat(more);\n }\n\n const options = shuffled([correct, ...wrongs]).slice(0,4);\n q.choices = options;\n q.correctChoiceIndex = options.indexOf(correct);\n }\n }\n\n \/\/ ====== ARCADE RENDER ======\n function resetChoiceStyles(){\n const buttons = choicesContainer.querySelectorAll(\".choice-btn\");\n buttons.forEach(btn=>btn.classList.remove(\"correct\",\"wrong\",\"disabled\"));\n }\n function lockChoices(){\n const buttons = choicesContainer.querySelectorAll(\".choice-btn\");\n buttons.forEach(btn=>btn.classList.add(\"disabled\"));\n }\n\n function renderChoices(index){\n const q = questions[index];\n const labels=[\"A\",\"B\",\"C\",\"D\"];\n choicesContainer.innerHTML=\"\";\n (q.choices||[]).forEach((choiceText, idx)=>{\n const btn=document.createElement(\"button\");\n btn.className=\"choice-btn\";\n btn.dataset.index=idx;\n btn.innerHTML = `<span class=\"choice-label\">${labels[idx]}<\/span><span class=\"choice-text\">${choiceText}<\/span>`;\n btn.addEventListener(\"click\", ()=>handleArcadeChoice(idx));\n choicesContainer.appendChild(btn);\n });\n }\n\n function showArcadeQuestion(index){\n const q = questions[index];\n\n \/\/ DD badge + FX\n if (isDailyDouble(index)){\n dailyDoubleBadge.style.display=\"inline-block\";\n dailyDoubleBadge.classList.add(\"dd-pulse\");\n dailyDoubleBadge.textContent=\"\ud83c\udfaf DAILY DOUBLE!\";\n if (ddFxPlayedForIndex !== index){\n ddFxPlayedForIndex = index;\n showDailyDoubleFX();\n }\n } else {\n dailyDoubleBadge.style.display=\"none\";\n dailyDoubleBadge.classList.remove(\"dd-pulse\");\n }\n\n qNumberEl.textContent = `Question ${index+1} of ${questions.length}`;\n categoryEl.textContent = `${q.category} \u2022 ${q.difficulty} \u2022 ${q.points} pts`;\n questionEl.textContent = getQText(q);\n answerEl.textContent = getAText(q);\n answerEl.style.display=\"none\";\n questionLocked=false;\n hardTimedOut=false;\n stopHardTimer();\n resetChoiceStyles();\n renderChoices(index);\n startHardTimerIfNeeded(q);\n }\n\n function revealArcadeAnswer(fromTimeout=false){\n stopHardTimer();\n answerEl.style.display=\"block\";\n lockChoices();\n\n if (fromTimeout){\n \/\/ timeout acts like wrong: streak reset + penalty\n playWrongSound();\n streak = 0;\n updateStreakUI();\n updateScore(-Math.floor(questions[currentQuestionIndex].points * 0.25));\n } else {\n playRevealSound();\n }\n }\n\n function handleArcadeChoice(choiceIndex){\n if (questionLocked || hardTimedOut) return;\n const q = questions[currentQuestionIndex];\n const correctIdx = q.correctChoiceIndex;\n const buttons = choicesContainer.querySelectorAll(\".choice-btn\");\n if (!buttons[choiceIndex]) return;\n\n stopHardTimer();\n buttons[correctIdx].classList.add(\"correct\");\n\n if (choiceIndex === correctIdx){\n buttons[choiceIndex].classList.add(\"correct\");\n playCorrectSound();\n answerEl.style.display=\"block\";\n lockChoices();\n\n \/\/ scoring: base * dailyDouble * streakMultiplier\n const ddMult = isDailyDouble(currentQuestionIndex) ? 2 : 1;\n const sMult = getStreakMultiplier();\n const earned = Math.round(q.points * ddMult * sMult);\n\n updateScore(earned);\n streak += 1;\n updateStreakUI();\n questionLocked = true;\n\n \/\/ move Daily Double after use\n if (isDailyDouble(currentQuestionIndex)){\n dailyDoubleBadge.textContent = \"\u2705 DAILY DOUBLE WON!\";\n setTimeout(()=>{\n pickDailyDouble();\n ddFxPlayedForIndex = null;\n dailyDoubleBadge.style.display=\"none\";\n dailyDoubleBadge.classList.remove(\"dd-pulse\");\n }, 700);\n }\n\n } else {\n buttons[choiceIndex].classList.add(\"wrong\");\n playWrongSound();\n answerEl.style.display=\"block\";\n lockChoices();\n\n streak = 0;\n updateStreakUI();\n updateScore(-Math.floor(q.points * 0.25)); \/\/ optional penalty\n }\n }\n\n function nextArcadeQuestion(){\n currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;\n playNextSound();\n showArcadeQuestion(currentQuestionIndex);\n }\n\n \/\/ ====== TTS ======\n function speak(text){\n if (!soundOn) return;\n if (!(\"speechSynthesis\" in window)) return;\n const u = new SpeechSynthesisUtterance(text);\n u.lang = (lang===\"AM\") ? \"am-ET\" : \"en-US\";\n window.speechSynthesis.cancel();\n window.speechSynthesis.speak(u);\n }\n function stopSpeaking(){ if (\"speechSynthesis\" in window) window.speechSynthesis.cancel(); }\n\n \/\/ ====== MODE SWITCH ======\n function setMode(newMode){\n mode = newMode;\n modePill.textContent = `Mode: ${mode}`;\n stopSpeaking();\n stopHardTimer();\n stopModalTimer();\n modal.classList.remove(\"show\");\n\n \/\/ chips\n [chipArcade, chipBoard, chipFinal, chipLeaderboard].forEach(c=>c.classList.remove(\"active\"));\n if (mode===\"ARCADE\") chipArcade.classList.add(\"active\");\n if (mode===\"BOARD\") chipBoard.classList.add(\"active\");\n if (mode===\"FINAL\") chipFinal.classList.add(\"active\");\n if (mode===\"LEADERBOARD\") chipLeaderboard.classList.add(\"active\");\n\n \/\/ views\n arcadeView.style.display = (mode===\"ARCADE\") ? \"block\" : \"none\";\n boardView.style.display = (mode===\"BOARD\") ? \"block\" : \"none\";\n finalView.style.display = (mode===\"FINAL\") ? \"block\" : \"none\";\n leaderboardView.style.display = (mode===\"LEADERBOARD\") ? \"block\" : \"none\";\n\n if (mode===\"ARCADE\") showArcadeQuestion(currentQuestionIndex);\n if (mode===\"BOARD\") buildBoard(true);\n if (mode===\"FINAL\") initFinal();\n if (mode===\"LEADERBOARD\") renderLeaderboard();\n }\n\n chipArcade.addEventListener(\"click\", ()=>setMode(\"ARCADE\"));\n chipBoard.addEventListener(\"click\", ()=>setMode(\"BOARD\"));\n chipFinal.addEventListener(\"click\", ()=>setMode(\"FINAL\"));\n chipLeaderboard.addEventListener(\"click\", ()=>setMode(\"LEADERBOARD\"));\n\n \/\/ ====== SKINS ======\n function setSkin(skin){\n body.setAttribute(\"data-skin\", skin);\n if (skin===\"yebbo\"){ brandLogo.textContent=\"YEBBO\"; brandSub.textContent=\"ARCADE\"; }\n if (skin===\"yebbosports\"){ brandLogo.textContent=\"YEBBO\"; brandSub.textContent=\"SPORTS\"; }\n if (skin===\"yebboacademy\"){ brandLogo.textContent=\"YEBBO\"; brandSub.textContent=\"ACADEMY\"; }\n if (skin===\"ethiotrivia\"){ brandLogo.textContent=\"YEBBO\"; brandSub.textContent=\"ETHIO TRIVIA\"; }\n }\n skinYebbo.addEventListener(\"click\", ()=>setSkin(\"yebbo\"));\n skinSports.addEventListener(\"click\", ()=>setSkin(\"yebbosports\"));\n skinAcademy.addEventListener(\"click\", ()=>setSkin(\"yebboacademy\"));\n skinEthio.addEventListener(\"click\", ()=>setSkin(\"ethiotrivia\"));\n\n \/\/ ====== BOARD MODE (6x5) ======\n function pickQuestionForCell(category, points){\n \/\/ prefer exact category match; else fallback to any question with same points\n const candidates = questions.filter(q => q.category === category && q.points === points);\n const fallback = questions.filter(q => q.points === points);\n const pool = candidates.length ? candidates : fallback;\n\n \/\/ pick a question not already used\n for (let tries=0; tries<3000; tries++){\n const q = pool[Math.floor(Math.random()*pool.length)];\n const key = q.category + \"|\" + q.question + \"|\" + q.answer;\n if (!boardUsed.has(key)){\n boardUsed.add(key);\n return q;\n }\n }\n \/\/ ultimate fallback: any unused\n for (let tries=0; tries<3000; tries++){\n const q = questions[Math.floor(Math.random()*questions.length)];\n const key = q.category + \"|\" + q.question + \"|\" + q.answer;\n if (!boardUsed.has(key)){\n boardUsed.add(key);\n return q;\n }\n }\n return questions[0];\n }\n\n function buildBoard(forceNew=false){\n if (forceNew){\n boardUsed = new Set();\n boardCells = [];\n for (let c=0;c<6;c++){\n boardCells[c]=[];\n for (let r=0;r<5;r++){\n const cat = BOARD_CATS[c];\n const pts = BOARD_POINT_LEVELS[r];\n boardCells[c][r] = pickQuestionForCell(cat, pts);\n }\n }\n }\n\n boardGrid.innerHTML = \"\";\n\n \/\/ category headers\n for (let c=0;c<6;c++){\n const h = document.createElement(\"div\");\n h.className = \"board-cat\";\n h.textContent = BOARD_CATS[c];\n boardGrid.appendChild(h);\n }\n\n \/\/ cells\n for (let r=0;r<5;r++){\n for (let c=0;c<6;c++){\n const cell = document.createElement(\"div\");\n cell.className = \"cell\";\n const pts = BOARD_POINT_LEVELS[r];\n cell.textContent = pts;\n const id = `${c}-${r}`;\n cell.dataset.id = id;\n cell.addEventListener(\"click\", ()=>openCell(c,r));\n boardGrid.appendChild(cell);\n }\n }\n }\n\n function markCellUsed(cellId){\n const el = boardGrid.querySelector(`.cell[data-id=\"${cellId}\"]`);\n if (el){\n el.classList.add(\"used\");\n el.textContent = \"\u2014\";\n }\n }\n\n function openCell(c,r){\n const q = boardCells[c][r];\n modalQuestion = q;\n modalCellId = `${c}-${r}`;\n modalBasePoints = BOARD_POINT_LEVELS[r];\n showModalQuestion(q);\n modal.classList.add(\"show\");\n modalA.style.display=\"none\";\n startModalTimerIfNeeded(q);\n }\n\n function showModalQuestion(q){\n modalMeta.innerHTML = \"\";\n const tags = [\n { txt:`${q.category}`, cls:\"tag\" },\n { txt:`${q.difficulty}`, cls:\"tag\" },\n { txt:`${modalBasePoints} pts`, cls:\"tag gold\" },\n { txt:`Active: ${teams[activeTeam].name}`, cls:\"tag\" }\n ];\n tags.forEach(t=>{\n const d=document.createElement(\"div\");\n d.className=t.cls;\n d.textContent=t.txt;\n modalMeta.appendChild(d);\n });\n\n modalQ.textContent = getQText(q);\n modalA.textContent = getAText(q);\n }\n\n function closeModal(){\n stopModalTimer();\n modal.classList.remove(\"show\");\n }\n\n modalReveal.addEventListener(\"click\", ()=>{\n stopModalTimer();\n modalA.style.display=\"block\";\n playRevealSound();\n });\n\n modalCorrect.addEventListener(\"click\", ()=>{\n stopModalTimer();\n if (!modalQuestion) return;\n modalA.style.display=\"block\";\n playCorrectSound();\n\n \/\/ board scoring: cell points * streak multiplier (team streak is shared with arcade streak for simplicity)\n const earned = Math.round(modalBasePoints * getStreakMultiplier());\n teams[activeTeam].score += earned;\n streak += 1;\n updateStreakUI();\n renderTeams();\n\n \/\/ mark used\n markCellUsed(modalCellId);\n closeModal();\n });\n\n modalWrong.addEventListener(\"click\", ()=>{\n stopModalTimer();\n if (!modalQuestion) return;\n modalA.style.display=\"block\";\n playWrongSound();\n\n teams[activeTeam].score = Math.max(0, teams[activeTeam].score - Math.floor(modalBasePoints * 0.25));\n streak = 0;\n updateStreakUI();\n renderTeams();\n });\n\n modalClose.addEventListener(\"click\", closeModal);\n\n boardReset.addEventListener(\"click\", ()=>buildBoard(true));\n boardToggleLang.addEventListener(\"click\", toggleLanguage);\n\n \/\/ ====== FINAL JEOPARDY ======\n function renderWagers(){\n wagerGrid.innerHTML = \"\";\n teams.forEach((t, idx)=>{\n const wrap = document.createElement(\"div\");\n wrap.style.background = \"rgba(0,240,255,0.08)\";\n wrap.style.border = \"1px solid rgba(0,240,255,0.18)\";\n wrap.style.borderRadius = \"14px\";\n wrap.style.padding = \"10px\";\n wrap.innerHTML = `\n <div style=\"display:flex;justify-content:space-between;gap:8px;align-items:center;\">\n <div style=\"font-weight:900;letter-spacing:1px;\">${t.name}<\/div>\n <div style=\"color:var(--gold);font-weight:900;\">${t.score} pts<\/div>\n <\/div>\n <div style=\"margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;\">\n <span class=\"tag gold\">Wager<\/span>\n <input data-idx=\"${idx}\" type=\"number\" min=\"0\" value=\"${wagers[idx]}\" style=\"width:120px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.16);background:rgba(5,15,40,0.8);color:#fff;font-weight:900;\">\n <button class=\"mini\" data-wact=\"max\" data-idx=\"${idx}\">Max<\/button>\n <button class=\"mini danger\" data-wact=\"zero\" data-idx=\"${idx}\">0<\/button>\n <\/div>\n `;\n wagerGrid.appendChild(wrap);\n });\n }\n\n wagerGrid.addEventListener(\"input\", (e)=>{\n const inp = e.target.closest(\"input\");\n if (!inp) return;\n const idx = parseInt(inp.dataset.idx,10);\n const val = Math.max(0, parseInt(inp.value || \"0\",10));\n wagers[idx] = val;\n });\n wagerGrid.addEventListener(\"click\", (e)=>{\n const btn = e.target.closest(\"button\");\n if (!btn) return;\n const act = btn.dataset.wact;\n const idx = parseInt(btn.dataset.idx,10);\n if (act===\"max\"){ wagers[idx] = teams[idx].score; renderWagers(); }\n if (act===\"zero\"){ wagers[idx] = 0; renderWagers(); }\n });\n\n function pickFinalQuestion(){\n \/\/ choose a \"Hard\" or high-point question for Final\n const hardPool = questions.filter(q => q.difficulty === \"Hard\");\n finalQuestion = hardPool[Math.floor(Math.random()*hardPool.length)];\n finalRevealed = false;\n finalA.style.display = \"none\";\n renderFinalQuestion();\n }\n\n function renderFinalQuestion(){\n if (!finalQuestion){\n finalQ.textContent = \"Click \u201cPick Final Question\u201d.\";\n finalA.textContent = \"\";\n finalA.style.display=\"none\";\n return;\n }\n finalQ.textContent = getQText(finalQuestion);\n finalA.textContent = getAText(finalQuestion);\n if (finalRevealed) finalA.style.display = \"block\";\n }\n\n function initFinal(){\n renderWagers();\n renderFinalQuestion();\n }\n\n finalPick.addEventListener(\"click\", ()=>{\n pickFinalQuestion();\n playBeep(990,140);\n });\n\n finalReveal.addEventListener(\"click\", ()=>{\n if (!finalQuestion) return;\n finalRevealed = true;\n finalA.style.display = \"block\";\n playRevealSound();\n });\n\n finalToggleLang.addEventListener(\"click\", toggleLanguage);\n\n finalMarkCorrect.addEventListener(\"click\", ()=>{\n if (!finalQuestion) return;\n const w = wagers[activeTeam] || 0;\n teams[activeTeam].score += w;\n playCorrectSound();\n renderTeams();\n renderWagers();\n });\n\n finalMarkWrong.addEventListener(\"click\", ()=>{\n if (!finalQuestion) return;\n const w = wagers[activeTeam] || 0;\n teams[activeTeam].score = Math.max(0, teams[activeTeam].score - w);\n playWrongSound();\n renderTeams();\n renderWagers();\n });\n\n finalNextTeam.addEventListener(\"click\", ()=>{\n activeTeam = (activeTeam + 1) % teams.length;\n renderTeams();\n renderWagers();\n playBeep(520,90);\n });\n\n \/\/ ====== LEADERBOARD (LocalStorage) ======\n const LB_KEY = \"yebbo_ethio_trivia_leaderboard_v1\";\n\n function loadLB(){\n try{\n const raw = localStorage.getItem(LB_KEY);\n return raw ? JSON.parse(raw) : [];\n } catch {\n return [];\n }\n }\n function saveLB(list){\n localStorage.setItem(LB_KEY, JSON.stringify(list));\n }\n\n function renderLeaderboard(){\n const list = loadLB().sort((a,b)=>b.score-a.score).slice(0,50);\n lbBody.innerHTML = \"\";\n list.forEach((row, idx)=>{\n const tr = document.createElement(\"tr\");\n tr.innerHTML = `\n <td style=\"padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);\">${idx+1}<\/td>\n <td style=\"padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);font-weight:900;\">${escapeHtml(row.name)}<\/td>\n <td style=\"padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);color:var(--gold);font-weight:900;\">${row.score}<\/td>\n <td style=\"padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);\">${escapeHtml(row.mode)}<\/td>\n <td style=\"padding:10px;border-bottom:1px solid rgba(255,255,255,0.08);\">${escapeHtml(row.when)}<\/td>\n `;\n lbBody.appendChild(tr);\n });\n lbCount.textContent = `${list.length} entries`;\n }\n\n function escapeHtml(s){\n return String(s).replace(\/[&<>\"']\/g, (m)=>({ \"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\" }[m]));\n }\n\n saveScoreBtn.addEventListener(\"click\", ()=>{\n const name = prompt(\"Name for leaderboard:\", \"Guest\");\n if (!name) return;\n\n const list = loadLB();\n list.push({\n name: name.trim().slice(0, 40),\n score: score,\n mode: mode,\n when: new Date().toLocaleString()\n });\n saveLB(list);\n renderLeaderboard();\n playBeep(990,120);\n });\n\n clearLBBtn.addEventListener(\"click\", ()=>{\n if (!confirm(\"Clear leaderboard for this browser?\")) return;\n saveLB([]);\n renderLeaderboard();\n playBeep(220,140);\n });\n\n \/\/ ====== EVENTS ======\n revealBtn.addEventListener(\"click\", ()=>revealArcadeAnswer(false));\n nextBtn.addEventListener(\"click\", nextArcadeQuestion);\n\n readQuestionBtn.addEventListener(\"click\", ()=>{\n const q=questions[currentQuestionIndex];\n speak(`${q.category}. ${getQText(q)}`);\n });\n readAnswerBtn.addEventListener(\"click\", ()=>{\n const q=questions[currentQuestionIndex];\n speak(getAText(q));\n });\n\n switchLangBtn.addEventListener(\"click\", toggleLanguage);\n\n boardToggleLang.addEventListener(\"click\", toggleLanguage);\n\n \/\/ Keyboard shortcuts for arcade\n document.addEventListener(\"keydown\", (e)=>{\n if (mode !== \"ARCADE\") return;\n if (e.code === \"Space\"){\n e.preventDefault();\n revealArcadeAnswer(false);\n } else if (e.code === \"ArrowRight\"){\n nextArcadeQuestion();\n } else if ([\"Digit1\",\"Digit2\",\"Digit3\",\"Digit4\"].includes(e.code)){\n const idx = parseInt(e.key,10)-1;\n handleArcadeChoice(idx);\n }\n });\n\n \/\/ ====== INIT ======\n buildChoicesForAll();\n pickDailyDouble();\n updateScore(0);\n updateStreakUI();\n renderTeams();\n renderWagers();\n renderLeaderboard();\n setMode(\"ARCADE\");\n setSkin(\"ethiotrivia\");\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>YEBBO ARCADE \u2022 ETHIO TRIVIA JEOPARDY (Board + Teams + Final + Leaderboard) YEBBO ETHIO TRIVIA Loading… Score: 0 Level […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-526","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8nzgb-8u","jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":1,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/526\/revisions"}],"predecessor-version":[{"id":527,"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/pages\/526\/revisions\/527"}],"wp:attachment":[{"href":"http:\/\/yebbo.com\/ethiodiego\/wp-json\/wp\/v2\/media?parent=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}