{"id":32,"date":"2026-07-22T22:12:42","date_gmt":"2026-07-22T22:12:42","guid":{"rendered":"https:\/\/buffaloonthego.com\/?page_id=32"},"modified":"2026-09-17T20:36:19","modified_gmt":"2026-09-17T20:36:19","slug":"new-quiz","status":"publish","type":"page","link":"https:\/\/buffaloonthego.com\/","title":{"rendered":"New Quiz"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&amp;family=Archivo+Black&amp;family=Space+Mono:wght@400;700&amp;family=Oswald:wght@400;500;600&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  :root{\n    --paper:#efe9dc;\n    --ink:#181410;\n    --hotpink:#e0245e;\n    --mustard:#e8a92e;\n    --teal:#1c6e63;\n    --line: rgba(24,20,16,0.15);\n  }\n  *{box-sizing:border-box;}\n  html,body{margin:0;padding:0;}\n  body{\n    background:var(--ink);\n    background-image:\n      radial-gradient(circle at 15% 20%, rgba(224,36,94,0.10), transparent 40%),\n      radial-gradient(circle at 85% 80%, rgba(232,169,46,0.08), transparent 45%);\n    color:var(--paper);\n    font-family:'Oswald', sans-serif;\n    min-height:100vh;\n  }\n  .wrap{max-width:1150px;margin:0 auto;padding:28px 20px 60px;}\n  .hidden{display:none !important;}\n\n  \/* ---------- Header ---------- *\/\n  .masthead{\n    display:flex;justify-content:space-between;align-items:flex-end;\n    border-bottom:4px solid var(--paper);\n    padding-bottom:14px;margin-bottom:26px;\n    flex-wrap:wrap;gap:10px;\n  }\n  .masthead h1{\n    font-family:'Anton', sans-serif;\n    font-size:clamp(2.4rem, 6vw, 4.2rem);\n    letter-spacing:1px;\n    margin:0;\n    line-height:0.9;\n    text-transform:uppercase;\n    color:var(--paper);\n    text-shadow: 4px 4px 0 var(--hotpink);\n  }\n  .masthead .sub{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;\n    color:var(--mustard);\n    letter-spacing:2px;\n    text-transform:uppercase;\n  }\n  .header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}\n  .scoreboard-text{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;\n    color:var(--paper);\n    opacity:0.7;\n  }\n  button.action{\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;letter-spacing:0.5px;\n    font-size:0.9rem;\n    padding:12px 22px;\n    border:none;border-radius:3px;\n    cursor:pointer;\n    background:var(--hotpink);color:var(--paper);\n    box-shadow:4px 4px 0 rgba(0,0,0,0.5);\n    transition:transform .1s ease;\n  }\n  button.action:hover{transform:translate(-2px,-2px);}\n  button.action:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,0.5);}\n  button.action.secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);}\n  button.action.ghost{background:transparent;color:var(--paper);border:2px solid var(--paper);box-shadow:none;}\n  button.action.small{padding:9px 16px;font-size:0.75rem;}\n  button.action:disabled{opacity:0.35;cursor:not-allowed;}\n\n  \/* ---------- Title Screen ---------- *\/\n  .title-screen{\n    display:flex;flex-direction:column;align-items:center;justify-content:center;\n    text-align:center;\n    min-height:80vh;\n  }\n  .logo-box{\n    border:4px solid var(--paper);\n    border-radius:6px;\n    padding:40px 60px;\n    margin-bottom:34px;\n    box-shadow:8px 8px 0 rgba(224,36,94,0.5);\n  }\n  .logo-box .logo-text{\n    font-family:'Anton', sans-serif;\n    font-size:clamp(2.6rem, 7vw, 5rem);\n    letter-spacing:2px;\n    text-transform:uppercase;\n    color:var(--paper);\n    text-shadow:5px 5px 0 var(--hotpink);\n    line-height:0.95;\n  }\n  .logo-box .logo-tagline{\n    font-family:'Space Mono', monospace;\n    font-size:0.9rem;\n    letter-spacing:4px;\n    text-transform:uppercase;\n    color:var(--mustard);\n    margin-top:10px;\n  }\n  .logo-placeholder-note{\n    font-family:'Space Mono', monospace;\n    font-size:0.65rem;\n    color:var(--paper);\n    opacity:0.35;\n    margin-top:14px;\n    letter-spacing:1px;\n  }\n\n  .rules-box{\n    width:100%;\n    max-width:700px;\n    max-height:280px;\n    overflow-y:auto;\n    text-align:left;\n    background:rgba(239,233,220,0.06);\n    border:2px solid rgba(239,233,220,0.25);\n    border-radius:6px;\n    padding:22px 26px;\n    margin-top:34px;\n  }\n  .rules-box h2{\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;\n    font-size:1.3rem;\n    margin:0 0 14px;\n    color:var(--paper);\n  }\n  .rules-box h3{\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;\n    font-size:0.95rem;\n    letter-spacing:1px;\n    color:var(--mustard);\n    margin:20px 0 8px;\n  }\n  .rules-box h3:first-of-type{margin-top:0;}\n  .rules-box p{\n    font-family:'Oswald', sans-serif;\n    font-size:0.95rem;\n    line-height:1.5;\n    margin:0 0 8px;\n    color:var(--paper);\n    opacity:0.9;\n  }\n  .rules-box ul{\n    margin:0 0 8px;\n    padding-left:20px;\n  }\n  .rules-box li{\n    font-family:'Oswald', sans-serif;\n    font-size:0.95rem;\n    line-height:1.5;\n    margin-bottom:4px;\n    color:var(--paper);\n    opacity:0.9;\n  }\n  .rules-box strong{color:var(--mustard);}\n\n  \/* ---------- Team Setup ---------- *\/\n  .team-setup{\n    max-width:600px;\n    margin:0 auto;\n    padding:40px 0;\n  }\n  .team-setup h2{\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;\n    font-size:1.6rem;\n    margin-bottom:6px;\n    color:var(--paper);\n  }\n  .team-setup .hint{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;\n    color:var(--mustard);\n    margin-bottom:24px;\n  }\n  .team-input-row{\n    display:flex;gap:10px;margin-bottom:22px;\n  }\n  .team-input-row input{\n    flex:1;\n    font-family:'Oswald', sans-serif;\n    font-size:1.05rem;\n    padding:12px 14px;\n    border:2px solid var(--paper);\n    background:transparent;\n    color:var(--paper);\n    border-radius:3px;\n  }\n  .team-input-row input::placeholder{color:rgba(239,233,220,0.5);}\n  .team-input-row input:focus{outline:none;border-color:var(--mustard);}\n\n  .team-list{list-style:none;margin:0 0 30px;padding:0;}\n  .team-list li{\n    display:flex;justify-content:space-between;align-items:center;\n    background:var(--paper);color:var(--ink);\n    padding:12px 16px;border-radius:3px;\n    margin-bottom:10px;\n    font-family:'Archivo Black', sans-serif;\n    font-size:1rem;\n    border:2px solid var(--ink);\n  }\n  .team-list .remove-team{\n    background:none;border:none;color:var(--hotpink);\n    font-family:'Space Mono', monospace;\n    font-size:1.2rem;cursor:pointer;line-height:1;\n  }\n  .team-list-empty{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;color:var(--paper);opacity:0.5;\n    margin-bottom:22px;\n  }\n\n  \/* ---------- Menu grid ---------- *\/\n  .round-block{margin-bottom:34px;}\n  .round-title{\n    font-family:'Archivo Black', sans-serif;\n    font-size:1.1rem;\n    text-transform:uppercase;\n    letter-spacing:1px;\n    display:flex;align-items:center;gap:12px;\n    margin-bottom:14px;\n    color:var(--mustard);\n  }\n  .round-title::after{content:\"\";flex:1;height:2px;background:rgba(232,169,46,0.25);}\n  .grid{\n    display:grid;\n    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));\n    gap:14px;\n  }\n  .card{\n    background:var(--paper);\n    color:var(--ink);\n    border-radius:2px;\n    padding:16px 14px;\n    cursor:pointer;\n    position:relative;\n    border:2px solid var(--ink);\n    box-shadow:5px 5px 0 rgba(0,0,0,0.35);\n    transition:transform .12s ease, box-shadow .12s ease;\n    min-height:96px;\n    display:flex;flex-direction:column;justify-content:space-between;\n  }\n  .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,0.4);}\n  .card:active{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(0,0,0,0.4);}\n  .card .cat-name{\n    font-family:'Archivo Black', sans-serif;\n    font-size:1.02rem;\n    text-transform:uppercase;\n    line-height:1.15;\n  }\n  .card .cat-meta{\n    font-family:'Space Mono', monospace;\n    font-size:0.7rem;\n    color:var(--hotpink);\n    margin-top:8px;\n    letter-spacing:1px;\n  }\n  .card.disabled{opacity:0.4;cursor:not-allowed;}\n  .card.disabled:hover{transform:none;box-shadow:5px 5px 0 rgba(0,0,0,0.35);}\n  .card.done{background:var(--teal);color:var(--paper);border-color:var(--teal);}\n  .card.done .cat-meta{color:var(--mustard);}\n\n\n  \/* ---------- Stage (question view) ---------- *\/\n  .stage{display:none;}\n  .stage.active{display:block;}\n\n  .stage-top{\n    display:flex;justify-content:space-between;align-items:center;\n    margin-bottom:18px;flex-wrap:wrap;gap:10px;\n  }\n  .back-btn{\n    font-family:'Space Mono', monospace;\n    background:none;border:2px solid var(--paper);color:var(--paper);\n    padding:8px 14px;cursor:pointer;font-size:0.8rem;letter-spacing:1px;text-transform:uppercase;\n    border-radius:2px;\n  }\n  .back-btn:hover{background:var(--paper);color:var(--ink);}\n  .pill{\n    font-family:'Space Mono', monospace;\n    background:var(--hotpink);color:var(--paper);\n    padding:6px 14px;border-radius:20px;font-size:0.75rem;\n    letter-spacing:1px;text-transform:uppercase;\n  }\n\n  .board{\n    background:var(--paper);color:var(--ink);\n    border:3px solid var(--ink);\n    border-radius:4px;\n    padding:48px 44px;\n    min-height:400px;\n    display:flex;flex-direction:column;justify-content:center;\n    box-shadow:8px 8px 0 rgba(0,0,0,0.4);\n    position:relative;\n  }\n  .q-eyebrow{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;\n    color:var(--hotpink);margin-bottom:16px;\n  }\n  .q-text{\n    font-family:'Archivo Black', sans-serif;\n    font-size:clamp(1.9rem, 4.4vw, 3.1rem);\n    line-height:1.22;\n    margin:0 0 30px 0;\n  }\n  .choices{\n    display:grid;grid-template-columns:1fr 1fr;gap:16px;\n    margin-bottom:8px;\n  }\n  .choice{\n    font-family:'Oswald', sans-serif;\n    font-size:1.5rem;\n    border:2px solid var(--ink);\n    padding:20px 22px;border-radius:4px;\n    background:transparent;\n    cursor:pointer;\n    transition:transform .08s ease, background .12s ease;\n  }\n  .choice:hover:not(.correct):not(.wrong):not(.locked){\n    background:rgba(24,20,16,0.06);\n  }\n  .choice:active:not(.locked){transform:translate(1px,1px);}\n  .choice.correct{\n    background:var(--teal);color:var(--paper);border-color:var(--teal);\n    font-weight:600;\n  }\n  .choice.wrong{\n    background:var(--hotpink);color:var(--paper);border-color:var(--hotpink);\n    font-weight:600;\n  }\n  .choice.locked{cursor:default;}\n  .video-link{\n    display:inline-block;margin-top:10px;\n    font-family:'Space Mono', monospace;\n    color:var(--hotpink);text-decoration:underline;\n    font-size:0.95rem;\n  }\n  .clip-time{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;color:var(--teal);margin-top:4px;\n  }\n  .answer-panel{\n    margin-top:26px;padding-top:22px;border-top:2px dashed var(--ink);\n    display:none;\n  }\n  .answer-panel.shown{display:block;}\n  .answer-label{\n    font-family:'Space Mono', monospace;\n    font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n    color:var(--teal);margin-bottom:8px;\n  }\n  .answer-text{\n    font-family:'Archivo Black', sans-serif;\n    font-size:1.6rem;\n  }\n  .placeholder-note{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;\n    background:var(--mustard);\n    color:var(--ink);\n    padding:10px 14px;border-radius:3px;\n    margin-top:16px;\n    display:inline-block;\n  }\n  .media-note{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;\n    background:var(--mustard);\n    color:var(--ink);\n    padding:10px 14px;border-radius:3px;\n    margin-bottom:20px;\n    display:inline-block;\n  }\n  .question-image{\n    display:block;\n    align-self:flex-start;\n    width:auto;\n    height:auto;\n    max-width:100%;\n    max-height:320px;\n    object-fit:contain;\n    border:2px solid var(--ink);\n    border-radius:4px;\n    margin-bottom:20px;\n  }\n\n  \/* ---------- Team scoring panel ---------- *\/\n  .score-panel{\n    margin-top:26px;padding-top:22px;border-top:2px dashed var(--ink);\n  }\n  .score-panel-label{\n    font-family:'Space Mono', monospace;\n    font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n    color:var(--hotpink);margin-bottom:12px;\n  }\n  .score-team-grid{\n    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));\n    gap:10px;\n  }\n  .score-team-item{\n    display:flex;align-items:center;gap:10px;\n    background:rgba(24,20,16,0.05);\n    border:2px solid var(--ink);\n    border-radius:3px;\n    padding:10px 12px;\n    cursor:pointer;\n    font-family:'Oswald', sans-serif;\n    font-size:0.95rem;\n    transition:background .12s ease;\n  }\n  .score-team-item.checked{\n    background:var(--teal);color:var(--paper);border-color:var(--teal);\n    font-weight:600;\n  }\n  .score-team-item input{\n    width:18px;height:18px;accent-color:var(--teal);\n    cursor:pointer;flex-shrink:0;\n  }\n  .no-teams-note{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;opacity:0.6;\n  }\n  .doubler-btn{\n    margin-top:16px;\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;letter-spacing:0.5px;\n    font-size:0.85rem;\n    padding:12px 20px;\n    border:2px solid var(--hotpink);\n    border-radius:4px;\n    background:transparent;color:var(--hotpink);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n  }\n  .doubler-btn:hover{background:rgba(224,36,94,0.08);}\n  .doubler-btn.on{background:var(--hotpink);color:var(--paper);}\n  .score-team-item.doubled{\n    box-shadow:0 0 0 2px var(--mustard) inset;\n  }\n  .doubler-popup{\n    margin-top:14px;\n    background:rgba(24,20,16,0.05);\n    border:2px solid var(--ink);\n    border-radius:4px;\n    padding:16px;\n  }\n  .doubler-popup-label{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;\n    margin-bottom:12px;\n  }\n  .doubler-popup-list{\n    display:grid;\n    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));\n    gap:8px;\n    margin-bottom:14px;\n  }\n  .doubler-popup-item{\n    display:flex;align-items:center;gap:8px;\n    font-family:'Oswald', sans-serif;\n    font-size:0.95rem;\n    background:var(--paper);\n    border:2px solid var(--ink);\n    border-radius:3px;\n    padding:8px 10px;\n    cursor:pointer;\n  }\n  .doubler-popup-item input{\n    width:16px;height:16px;accent-color:var(--hotpink);cursor:pointer;\n  }\n\n  .controls{\n    display:flex;justify-content:space-between;align-items:center;\n    margin-top:24px;flex-wrap:wrap;gap:10px;\n  }\n  .btn-group{display:flex;gap:10px;flex-wrap:wrap;}\n\n  .q-progress{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;color:var(--paper);opacity:0.7;\n  }\n\n  footer.note{\n    text-align:center;margin-top:40px;\n    font-family:'Space Mono', monospace;\n    font-size:0.7rem;color:var(--paper);opacity:0.4;\n  }\n\n  \/* ---------- Scoreboard Modal ---------- *\/\n  .modal-overlay{\n    position:fixed;inset:0;\n    background:rgba(24,20,16,0.75);\n    display:flex;align-items:center;justify-content:center;\n    padding:20px;z-index:100;\n  }\n  .modal-box{\n    background:var(--paper);color:var(--ink);\n    border:3px solid var(--ink);\n    border-radius:6px;\n    padding:30px;\n    max-width:560px;width:100%;\n    max-height:85vh;overflow-y:auto;\n    box-shadow:10px 10px 0 rgba(0,0,0,0.5);\n  }\n  .modal-top{\n    display:flex;justify-content:space-between;align-items:center;\n    margin-bottom:20px;\n  }\n  .modal-top h2{\n    font-family:'Anton', sans-serif;\n    text-transform:uppercase;\n    font-size:1.8rem;\n    margin:0;\n  }\n  .modal-close{\n    background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink);\n    line-height:1;\n  }\n  .lb-row{\n    display:grid;\n    grid-template-columns:34px 1fr 90px 34px;\n    align-items:center;gap:10px;\n    padding:10px 0;\n    border-bottom:1px solid rgba(24,20,16,0.15);\n  }\n  .lb-rank{\n    font-family:'Archivo Black', sans-serif;\n    color:var(--teal);text-align:center;\n  }\n  .lb-row input[type=\"text\"]{\n    font-family:'Oswald', sans-serif;\n    font-size:1rem;\n    padding:8px 10px;\n    border:2px solid transparent;\n    background:rgba(24,20,16,0.05);\n    border-radius:3px;color:var(--ink);\n  }\n  .lb-row input[type=\"number\"]{\n    font-family:'Archivo Black', sans-serif;\n    font-size:1rem;\n    text-align:center;\n    padding:8px 6px;\n    border:2px solid transparent;\n    background:rgba(24,20,16,0.05);\n    border-radius:3px;color:var(--ink);\n  }\n  .lb-row input:focus{outline:none;border-color:var(--teal);}\n  .lb-remove{\n    background:none;border:none;color:var(--hotpink);\n    font-size:1.2rem;cursor:pointer;line-height:1;\n  }\n  .modal-actions{\n    display:flex;justify-content:space-between;align-items:center;\n    margin-top:20px;flex-wrap:wrap;gap:10px;\n  }\n  .modal-actions input[type=\"text\"]{\n    color:var(--ink) !important;\n    border-color:var(--ink) !important;\n    background:rgba(24,20,16,0.05) !important;\n  }\n  .modal-actions input[type=\"text\"]::placeholder{\n    color:rgba(24,20,16,0.45) !important;\n  }\n\n  @media (max-width:520px){\n    .choices{grid-template-columns:1fr;}\n    .board{padding:30px 24px;}\n    .q-text{font-size:1.6rem;}\n    .choice{font-size:1.2rem;}\n  }\n<\/style>\n\n\n<div class=\"wrap\">\n\n  <!-- ================= TITLE SCREEN ================= -->\n  <div class=\"title-screen\" id=\"titleView\">\n    <div class=\"logo-box\">\n      <div class=\"logo-text\">Musicology<\/div>\n      <div class=\"logo-tagline\">Trivia Night<\/div>\n      <div class=\"logo-placeholder-note\">[ Placeholder &#8211; swap in the real Musicology logo here ]<\/div>\n    <\/div>\n\n    <button class=\"action\" id=\"enterBtn\">Enter Trivia Night \u2192<\/button>\n\n    <div class=\"rules-box\">\n      <h2>Musicology Trivia Game Rules<\/h2>\n\n      <h3>General Rules<\/h3>\n      <ul>\n        <li><strong>No Phones:<\/strong> Put away all phones and smart devices, no cheating allowed!<\/li>\n        <li><strong>Have Fun:<\/strong> Keep it friendly and enjoy the game!<\/li>\n      <\/ul>\n\n      <h3>Overview<\/h3>\n      <p>The game consists of 2 main rounds, a mid-game video bonus, and 2 final bonus questions.<\/p>\n\n      <h3>Round 1<\/h3>\n      <p><strong>Format:<\/strong> Teams will be presented with 3 categories, with 2 questions each.<\/p>\n      <p><strong>Double Points:<\/strong> Each team selects 1 category to be worth double points before questions begin.<\/p>\n      <p><strong>Scoring:<\/strong><\/p>\n      <ul>\n        <li>Regular Questions: 5 points<\/li>\n        <li>Doubled Category: 10 points per question<\/li>\n      <\/ul>\n\n      <h3>Mid-Game Bonus (Between Rounds 1 &amp; 2)<\/h3>\n      <p><strong>Task:<\/strong> Watch a soundless video and name the band shown.<\/p>\n      <p><strong>Scoring:<\/strong> 15 points<\/p>\n\n      <h3>Round 2<\/h3>\n      <p><strong>Format:<\/strong> Same structure as Round 1 (3 categories, 2 questions each; 1 category chosen for double points).<\/p>\n      <p><strong>Scoring:<\/strong><\/p>\n      <ul>\n        <li>Regular Questions: 10 points<\/li>\n        <li>Doubled Category: 20 points per question<\/li>\n      <\/ul>\n\n      <h3>Any Round With a List Question<\/h3>\n      <p>There will be a question with numerous answers, and the teams will have 90 seconds to come up with as many answers as they can. Each correct answer earns 2 points, and the team with the most correct answers gets 10 additional bonus points. The most must be undisputed, no ties or bonus points in case of a tie.<\/p>\n\n      <h3>Final Bonus Round<\/h3>\n      <p><strong>Format:<\/strong> 2 General Knowledge questions.<\/p>\n      <p><strong>Scoring:<\/strong> 20 points each<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- ================= TEAM SETUP ================= -->\n  <div class=\"team-setup hidden\" id=\"teamSetupView\">\n    <h2>Set Up Teams<\/h2>\n    <div class=\"hint\">Add every team playing tonight &#8211; you can still add or remove teams later from the scoreboard.<\/div>\n    <div class=\"team-input-row\">\n      <input type=\"text\" id=\"teamNameInput\" placeholder=\"Team name\" maxlength=\"40\">\n      <button class=\"action secondary\" id=\"addTeamBtn\">Add<\/button>\n    <\/div>\n    <div class=\"team-list-empty hidden\" id=\"teamListEmpty\">No teams added yet.<\/div>\n    <ul class=\"team-list\" id=\"teamListUl\"><\/ul>\n    <button class=\"action\" id=\"startTriviaBtn\">Start Trivia \u2192<\/button>\n  <\/div>\n\n  <!-- ================= MAIN GAME (menu + stage) ================= -->\n  <div id=\"gameView\" class=\"hidden\">\n\n    <div class=\"masthead\">\n      <div>\n        <h1>Trivia Night<\/h1>\n        <div class=\"sub\">Music Edition | Host Console<\/div>\n      <\/div>\n      <div class=\"header-right\">\n        <div class=\"scoreboard-text\" id=\"progressSummary\"><\/div>\n        <button class=\"action secondary small\" id=\"openScoreboardBtn\">Scoreboard<\/button>\n      <\/div>\n    <\/div>\n\n    <!-- ================= MENU ================= -->\n    <div class=\"menu\" id=\"menuView\">\n\n      <div class=\"round-block\">\n        <div class=\"round-title\">Round 1<\/div>\n        <div class=\"grid\" id=\"round1CatGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\">\n        <div class=\"round-title\">Round 2<\/div>\n        <div class=\"grid\" id=\"round2CatGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\" style=\"display:none;\">\n        <div class=\"round-title\">Other Categories (hidden for now)<\/div>\n        <div class=\"grid\" id=\"hiddenCatGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\">\n        <div class=\"round-title\">Round 3<\/div>\n        <div class=\"grid\" id=\"round3CatGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\">\n        <div class=\"round-title\">Round 3 &#8211; Final General Questions<\/div>\n        <div class=\"grid\" id=\"round3FinalGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\" style=\"display:none;\">\n        <div class=\"round-title\">Old Round 3 &#8211; General Knowledge (unused, kept for later)<\/div>\n        <div class=\"grid\" id=\"round3Grid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\" style=\"display:none;\">\n        <div class=\"round-title\">Bonus &#8211; Name That Video<\/div>\n        <div class=\"grid\" id=\"videoGrid\"><\/div>\n      <\/div>\n\n      <div class=\"round-block\" style=\"display:none;\">\n        <div class=\"round-title\">Bonus &#8211; Butchering The Classics<\/div>\n        <div class=\"grid\" id=\"butcherGrid\"><\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- ================= STAGE ================= -->\n    <div class=\"stage\" id=\"stageView\">\n      <div class=\"stage-top\">\n        <button class=\"back-btn\" id=\"backBtn\">\u2190 Back to categories<\/button>\n        <span class=\"pill\" id=\"stagePill\"><\/span>\n      <\/div>\n\n      <div class=\"board\" id=\"boardContent\"><\/div>\n\n      <div class=\"controls\">\n        <div class=\"q-progress\" id=\"qProgress\"><\/div>\n        <div class=\"btn-group\">\n          <button class=\"action secondary\" id=\"prevBtn\">Prev<\/button>\n          <button class=\"action\" id=\"revealBtn\">Reveal Answer<\/button>\n          <button class=\"action ghost\" id=\"nextBtn\">Next Question \u2192<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <footer class=\"note\">Host view &#8211; click a category to run its questions, check off teams that got it right, Reveal to show the answer, Next to advance.<\/footer>\n  <\/div>\n\n<\/div>\n\n<!-- ================= SCOREBOARD MODAL ================= -->\n<div class=\"modal-overlay hidden\" id=\"scoreboardModal\">\n  <div class=\"modal-box\">\n    <div class=\"modal-top\">\n      <h2>Scoreboard<\/h2>\n      <button class=\"modal-close\" id=\"closeScoreboardBtn\">\u00d7<\/button>\n    <\/div>\n    <div id=\"leaderboardRows\"><\/div>\n    <div class=\"modal-actions\">\n      <div class=\"team-input-row\" style=\"margin-bottom:0;flex:1;\">\n        <input type=\"text\" id=\"modalNewTeamInput\" placeholder=\"Add another team\">\n        <button class=\"action secondary small\" id=\"modalAddTeamBtn\">Add<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ============ DATA ============ *\/\nconst categories = [\n  { name: \"CBGB's\", round:0, questions: [\n    { q:\"Name the legendary founder of CBGB's who opened the doors in December 1973?\", choices:[\"Malcolm McLaren\",\"Hilly Kristal\",\"Andy Warhol\",\"Lou Reed\"], answer:1 },\n    { q:\"Which of these bands did not regularly play the CBGB stage in its early years?\", choices:[\"Television\",\"Patti Smith Group\",\"The Stooges\",\"The Dead Boys\"], answer:2 }\n  ]},\n  { name:\"Gone Too Soon\", round:0, questions:[\n    { q:'On February 3, 1959, the music world suffered a devastating loss in a plane crash later dubbed \"The Day the Music Died.\" Which of these artists did NOT perish in that crash?', choices:[\"Buddy Holly\",\"Ritchie Valens\",\"The Big Bopper (J.P. Richardson)\",\"Eddie Cochran\"], answer:3 },\n    { q:\"Bon Scott, the original frontman for AC\/DC, tragically died in 1980. What was his official cause of death?\", choices:[\"Drug overdose\",\"Alcohol poisoning (acute alcohol intoxication)\",\"A motorcycle accident\",\"Heart failure\"], answer:1 }\n  ]},\n  { name:\"Hip Hop\", round:1, questions:[\n    { q:\"Which legendary hip-hop artist is famously known for releasing the acclaimed debut album Illmatic at just 19 years old?\", choices:[\"Nas\",\"Tupac Shakur\",\"The Notorious B.I.G.\",\"Snoop Dogg\"], answer:0 },\n    { q:\"Who became the first hip-hop artist to win the Pulitzer Prize for Music in 2018?\", choices:[\"J. Cole\",\"Drake\",\"Kanye West\",\"Kendrick Lamar\"], answer:3 }\n  ]},\n  { name:\"Original Band Names\", round:0, questions:[\n    { q:\"Before they became a global pop-rock phenomenon, Coldplay performed under what original moniker?\", choices:[\"Big Fat Noises\",\"Starfish\",\"The High Numbers\",\"Smile\"], answer:1 },\n    { q:\"Before Syd Barrett coined the name Pink Floyd, what was the group's original name?\", choices:[\"The Tea Set\",\"The Pendletones\",\"The Quarrymen\",\"Sigma 6\"], answer:0 }\n  ]},\n  { name:\"Woodstock\", round:2, questions:[\n    { q:\"In which New York town did the Woodstock festival actually take place?\", choices:[\"Woodstock, NY\",\"Bethel, NY\",\"Saugerties, NY\",\"Wallkill, NY\"], answer:1 },\n    { q:\"Which folk artist was the first official performer to take the stage at Woodstock?\", choices:[\"Joan Baez\",\"Arlo Guthrie\",\"Richie Havens\",\"Melanie\"], answer:2 }\n  ]},\n  { name:\"1-Hit Wonders\", round:0, questions:[\n    { q:'Which 1981 hit for the band Soft Cell is widely considered one of the most covered one-hit wonders of all time?', choices:['\"Tainted Love\"','\"Come On Eileen\"','\"Mickey\"','\"Love Shack\"'], answer:0 },\n    { q:'Which artist famously sang the 1982 cheerleader-pop anthem \"Mickey\"?', choices:[\"Cyndi Lauper\",\"Toni Basil\",\"Debbie Gibson\",\"Kim Wilde\"], answer:1 }\n  ]},\n  { name:\"The Beatles\", round:2, questions:[\n    { q:\"Which member was the last to officially join The Beatles' definitive lineup?\", choices:[\"George Harrison\",\"Paul McCartney\",\"Ringo Starr\",\"John Lennon\"], answer:2 },\n    { q:\"Who was the band's primary manager during their meteoric rise to fame?\", choices:[\"George Martin\",\"Brian Epstein\",\"Richard Lester\",\"Phil Spector\"], answer:1 }\n  ]},\n  { name:\"Power Couples\", round:1, questions:[\n    { q:\"Gwen Stefani and Gavin Rossdale ruled the rock charts in the late 90s and 2000s. Which No Doubt song was directly written about the breakdown of her romance with bandmate Tony Kanal?\", choices:['\"Don\\'t Speak\"','\"Just a Girl\"','\"Spiderwebs\"','\"Hey Baby\"'], answer:0 },\n    { q:\"Which pioneering English guitarist met his future wife, Patti Boyd, while she was still married to his friend George Harrison of The Beatles?\", choices:[\"Jimi Hendrix\",\"Jimmy Page\",\"Eric Clapton\",\"Jeff Beck\"], answer:2 }\n  ]},\n  { name:\"Cover Me\", round:0, questions:[\n    { q:'\"I Will Always Love You\" is a massive Whitney Houston ballad, but which country music legend wrote and recorded the original in 1973?', choices:[\"Loretta Lynn\",\"Dolly Parton\",\"Reba McEntire\",\"Patsy Cline\"], answer:1 },\n    { q:'The Bangles scored a 1986 Billboard number-one hit with \"Manic Monday,\" but which famous musician wrote the track under the pseudonym \"Christopher\"?', choices:[\"Prince\",\"Paul McCartney\",\"Bruce Springsteen\",\"John Mellencamp\"], answer:0 }\n  ]},\n  { name:\"You're So Vain\", round:2, questions:[\n    { q:'Which 1970s chart-topper was written by Elton John and Bernie Taupin as a tribute to Marilyn Monroe, later re-recorded for Princess Diana?', choices:['\"Rocket Man\"','\"Bennie and the Jets\"','\"Candle in the Wind\"','\"Tiny Dancer\"'], answer:2 },\n    { q:'Which Full House actor is famously rumored to be the subject of Alanis Morissette\\'s 1995 breakup anthem \"You Oughta Know\"?', choices:[\"John Stamos\",\"Bob Saget\",\"Dave Coulier\",\"Scott Weinger\"], answer:2 }\n  ]},\n  { name:\"Prog Rock\", round:1, questions:[\n    { q:\"Which classical composer wrote the original orchestral suite that ELP heavily adapted for their popular 1971 live album Pictures at an Exhibition?\", choices:[\"Modest Mussorgsky\",\"Pyotr Ilyich Tchaikovsky\",\"Sergei Prokofiev\",\"B\\u00e9la Bart\\u00f3k\"], answer:0 },\n    { q:\"What sci-fi concept album by the band Rush was famously inspired by an Ayn Rand novella, telling of a dystopian future where music is outlawed?\", choices:[\"2112\",\"Hemispheres\",\"A Farewell to Kings\",\"Moving Pictures\"], answer:0 }\n  ]},\n  { name:\"Grunge\", round:0, questions:[\n    { q:'Which famous 90s grunge supergroup released the 1991 hit \"Hunger Strike\" as a tribute to Mother Love Bone\\'s late frontman?', choices:[\"Temple of the Dog\",\"Mad Season\",\"Audioslave\",\"Blind Melon\"], answer:0 },\n    { q:'The tragic 1991 song \"Jeremy\" by Pearl Jam was inspired by:', choices:[\"A real-life news story about a boy who shot himself in front of his English class\",\"A poem written by frontman Eddie Vedder in high school\",\"The story of a famous local Seattle graffiti artist\",\"A recurring nightmare experienced by the band's guitarist\"], answer:0 }\n  ]}\n];\n\nconst round3 = [\n  { points:20, q:\"What was the best-selling album of all time worldwide, released in 1982?\", answer:\"Thriller - Michael Jackson\" },\n  { points:20, q:\"What was the real birth name of Queen frontman Freddie Mercury?\", answer:\"Farrokh Bulsara\" },\n  { points:20, q:\"In the classic movie The Big Lebowski, what band does The Dude not abide by?\", answer:\"The Eagles\" },\n  { points:20, q:\"What was Madonna's first top 10 hit?\", answer:'\"Borderline\" (1984, No. 10 on the Billboard Hot 100) - \"Holiday\" charted first but only reached No. 16' },\n  { points:20, q:\"Which famous acoustic artist tragically died in a plane crash while piloting his own plane in 1997?\", answer:\"John Denver\" },\n  { points:20, q:\"Van Halen famously banned what color M&Ms in their rider?\", answer:\"Brown\" },\n  { points:20, q:\"Art Garfunkel initially declined to sing one of Simon & Garfunkel's biggest hits solo. Which song is it?\", answer:'\"Bridge Over Troubled Water\"' },\n  { points:20, q:'Who is Kendrick Lamar\\'s diss track \"Not Like Us\" about?', answer:\"Drake\" },\n  { points:20, q:\"What singer was born Georgios Kyriacos Panayiotou?\", answer:\"George Michael\" }\n];\n\nconst videoRound = [\n  { points:15, label:\"Video Clip 1\", url:\"https:\/\/www.youtube.com\/watch?v=GHhD4PD75zY\", clip:\"Use :07 to :24\", placeholder:true },\n  { points:15, label:\"Video Clip 2\", url:\"https:\/\/www.youtube.com\/watch?v=fHiGbolFFGw\", clip:\"Use :28 to :42\", placeholder:true }\n];\n\n\/* Round 3 categories - 6 categories, 2 questions each, 15 pts\/question.\n   All choices scrambled from the source doc (where the correct answer was always A). *\/\nconst round3Categories = [\n  { name:\"Infamously Bad Albums\", questions:[\n    { q:'Bob Dylan was famous for confounding his critics and listeners. Which of his albums received a famous four-word review in Rolling Stone magazine of \"What Is This Shit?\"', choices:[\"Street Legal\",\"Nashville Skyline\",\"Self-Portrait\",\"Good As I Been to You\"], answer:2 },\n    { q:'A famous Motown artist was forced to put out an album that gave all the proceeds to his ex-wife as part of a separation agreement. The resulting album, entitled \"Here, My Dear,\" is widely considered the worst album ever released by Motown. Name the artist.', choices:[\"Edwin Starr\",\"Marvin Gaye\",\"Eddie Kendricks\",\"Smokey Robinson\"], answer:1 }\n  ]},\n  { name:\"Hip Hop Sampling\", questions:[\n    { q:'Parliament\/Funkadelic is the most sampled band in the history of hip-hop. Dr. Dre\\'s smash hit \"Let Me Ride\" samples what P-Funk classic?', choices:[\"Flashlight\",\"Give Up The Funk (Tear The Roof Off The Sucker)\",\"Mothership Connection\",\"Aquaboogie\"], answer:2, media:'Play clip 1 (<a class=\"video-link\" href=\"https:\/\/youtu.be\/cKu3_3mp1U8?t=52\" target=\"_blank\" rel=\"noopener\">youtu.be\/cKu3_3mp1U8<\/a>), from :52 to 1:19, before revealing choices.' },\n    { q:'What disco hit song is sampled on the seminal hip hop classic \"Rapper\\'s Delight\"?', choices:[\"Le Freak\",\"Stayin' Alive\",\"Apache\",\"Good Times\"], answer:3 }\n  ]},\n  { name:\"Origins of Rock n' Roll\", questions:[\n    { q:\"Hosted by Dick Clark, this TV show brought rock 'n' roll music into American households on weekday afternoons, showing teens dancing to lip-synched performances by stars of the era. The show came under fire for interracial dancing. Name the show.\", choices:[\"Your Hit Parade\",\"American Bandstand\",\"Hullabaloo\",\"The Ed Sullivan Show\"], answer:1 },\n    { q:'This Cleveland-based disc jockey coined the term \"rock and roll\" on his Moondog radio show:', choices:[\"Dewey Phillips\",\"Dick Clark\",\"Alan Freed\",\"Todd Storz\"], answer:2 }\n  ]},\n  { name:\"Album Covers\", questions:[\n    { q:\"John Lennon and Yoko Ono ruled the headlines in the late '60s with their various antics and demonstrations. This shocking album cover was released in 1968 and immediately banned - it was sold in most stores in a paper bag showing only John and Yoko's heads. Name the album.\", choices:[\"Love\",\"Two Virgins\",\"Sometime in New York City\",\"Wedding Album\"], answer:1, image:\"https:\/\/buffaloonthego.com\/wp-content\/uploads\/2026\/09\/TwoVCover.jpg\" },\n    { q:\"This classic rock band was famous for using women on their album covers, but this one went too far and was removed from some record stores. Name the band.\", choices:[\"Sparks\",\"Family\",\"Roxy Music\",\"Suede\"], answer:2, image:\"https:\/\/buffaloonthego.com\/wp-content\/uploads\/2026\/09\/Roxy_Music-Country_Life-e1789676348975.jpg\" }\n  ]},\n  { name:\"Ve Are De Germans!!!\", questions:[\n    { q:\"These krauts were seminal influences on hip hop and electronic dance music. Name them.\", choices:[\"Can\",\"Kraftwerk\",\"Popul Vuh\",\"Tangerine Dream\"], answer:1, image:\"https:\/\/buffaloonthego.com\/wp-content\/uploads\/2026\/09\/images.jpg\" },\n    { q:'Outside of being a megalomaniac, Adolf Hitler also considered himself a connoisseur of great music. What Teutonic classical composer was heavily associated with Hitler, so much so that his music was played in concentration camps as part of \"re-education\"?', choices:[\"Arnold Schoenberg\",\"Felix Mendelssohn\",\"Richard Wagner\",\"Gustav Mahler\"], answer:2 }\n  ]},\n  { name:\"Hair Metal\", questions:[\n    { q:'What hair metal singer famously said \"I hate cocaine, I just really like the way it smells\"?', choices:[\"Ozzy Osbourne\",\"Kevin DuBrow\",\"Taime Downe\",\"Joe Elliot\"], answer:1 },\n    { q:\"The super model dancing on the car in this video was dating the band's lead singer at the time. Name him.\", choices:[\"Tom Keifer\",\"Blackie Lawless\",\"David Coverdale\",\"Steven Tyler\"], answer:2, media:'Play clip 2 (<a class=\"video-link\" href=\"https:\/\/www.youtube.com\/watch?v=WyF8RHM1OCg&#038;list=RDWyF8RHM1OCg&#038;start_radio=1\" target=\"_blank\" rel=\"noopener\">youtube.com\/watch?v=WyF8RHM1OCg<\/a>), from the beginning to :15, before revealing choices.' }\n  ]}\n];\n\n\/* Round 3 - Final General Questions (no multiple choice), 15 pts each *\/\nconst round3Final = [\n  { q:'Under the proprietorship of Bill Graham, this legendary San Francisco venue emblemized the \"ballroom\" era of rock concerts. It was soon coupled with an east coast counterpart in NYC. Name the venue.', answer:\"The Fillmore\" },\n  { q:\"Based in Chicago, this label was founded by Polish immigrants, and specialized in recording local black talent. Artists who recorded for this label included The Moonglows, Muddy Waters, and rock 'n' roll pioneer Chuck Berry. Name the label.\", answer:\"Chess Records\" },\n  { q:\"Weird Al Yankovic will spoof anything he can to get a laugh. Name the song and artist he is taking to task in this clip.\", answer:'Coolio - \"Gangsta\\'s Paradise\" (the parody is \"Amish Paradise\")', media:'Play clip 3 (<a class=\"video-link\" href=\"https:\/\/www.youtube.com\/watch?v=z5rRZdiu1UE&#038;list=RDz5rRZdiu1UE&#038;start_radio=1\" target=\"_blank\" rel=\"noopener\">youtube.com\/watch?v=z5rRZdiu1UE<\/a>), from the beginning to :29, before revealing the answer.' },\n  { q:\"The video was directed under a pseudonym by one of the band members. Name the member and the alias he used when directing this and multiple other videos.\", answer:'MCA (Adam Yauch) - alias \"Nathanial Hornblower\"', media:'Video coming soon - clip 4 link TBD.' }\n];\n\n\/* ============ STORAGE ============ *\/\nconst TEAMS_KEY = 'triviaNightTeams';\n\nfunction loadTeams(){\n  try{\n    const raw = localStorage.getItem(TEAMS_KEY);\n    return raw ? JSON.parse(raw) : [];\n  }catch(e){ return []; }\n}\nfunction saveTeams(){\n  try{ localStorage.setItem(TEAMS_KEY, JSON.stringify(teams)); }catch(e){}\n}\n\nlet teams = loadTeams();\n\n\/* ============ TITLE \/ TEAM SETUP FLOW ============ *\/\nconst titleView = document.getElementById('titleView');\nconst teamSetupView = document.getElementById('teamSetupView');\nconst gameView = document.getElementById('gameView');\nconst enterBtn = document.getElementById('enterBtn');\nconst teamNameInput = document.getElementById('teamNameInput');\nconst addTeamBtn = document.getElementById('addTeamBtn');\nconst teamListUl = document.getElementById('teamListUl');\nconst teamListEmpty = document.getElementById('teamListEmpty');\nconst startTriviaBtn = document.getElementById('startTriviaBtn');\n\nenterBtn.addEventListener('click', () => {\n  titleView.classList.add('hidden');\n  teamSetupView.classList.remove('hidden');\n  renderTeamSetupList();\n});\n\nfunction renderTeamSetupList(){\n  teamListUl.innerHTML = '';\n  teamListEmpty.classList.toggle('hidden', teams.length > 0);\n  teams.forEach((team, idx) => {\n    const li = document.createElement('li');\n    li.innerHTML = `<span>${escapeHtml(team.name)}<\/span><button class=\"remove-team\" data-idx=\"${idx}\">&times;<\/button>`;\n    teamListUl.appendChild(li);\n  });\n  teamListUl.querySelectorAll('.remove-team').forEach(btn => {\n    btn.addEventListener('click', () => {\n      teams.splice(parseInt(btn.dataset.idx,10), 1);\n      saveTeams();\n      renderTeamSetupList();\n    });\n  });\n}\n\nfunction addTeamFromInput(inputEl, afterAdd){\n  const name = inputEl.value.trim();\n  if(!name) return;\n  teams.push({ name, points: 0 });\n  saveTeams();\n  inputEl.value = '';\n  if(afterAdd) afterAdd();\n}\n\naddTeamBtn.addEventListener('click', () => addTeamFromInput(teamNameInput, renderTeamSetupList));\nteamNameInput.addEventListener('keydown', (e) => {\n  if(e.key === 'Enter'){ e.preventDefault(); addTeamFromInput(teamNameInput, renderTeamSetupList); }\n});\n\nstartTriviaBtn.addEventListener('click', () => {\n  teamSetupView.classList.add('hidden');\n  gameView.classList.remove('hidden');\n});\n\nfunction escapeHtml(str){\n  return String(str).replace(\/[&<>\"']\/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[m]));\n}\n\n\/* ============ STATE ============ *\/\nlet currentSet = null;\nlet currentIndex = 0;\nlet completed = new Set();\n\n\/* ============ RENDER MENU ============ *\/\nconst round1CatGrid = document.getElementById('round1CatGrid');\nconst round2CatGrid = document.getElementById('round2CatGrid');\nconst hiddenCatGrid = document.getElementById('hiddenCatGrid');\nconst round3CatGrid = document.getElementById('round3CatGrid');\nconst round3FinalGrid = document.getElementById('round3FinalGrid');\nconst round3Grid = document.getElementById('round3Grid');\nconst videoGrid = document.getElementById('videoGrid');\nconst butcherGrid = document.getElementById('butcherGrid');\n\nfunction cardKey(type, idx){ return type + '-' + idx; }\n\nfunction categoryPoints(cat){\n  return cat.round === 2 ? 10 : 5;\n}\n\nfunction buildCategoryCard(gridEl, cat, idx){\n  const el = document.createElement('div');\n  el.className = 'card';\n  el.dataset.key = cardKey('cat', idx);\n  el.innerHTML = `\n    <div>\n      <div class=\"cat-name\">${cat.name}<\/div>\n      <div class=\"cat-meta\">2 QUESTIONS<\/div>\n    <\/div>\n  `;\n  el.addEventListener('click', () => openSet('cat', idx, cat.name, cat.questions, () => categoryPoints(cat)));\n  gridEl.appendChild(el);\n}\n\nfunction buildCategoryCards(){\n  round1CatGrid.innerHTML = '';\n  round2CatGrid.innerHTML = '';\n  hiddenCatGrid.innerHTML = '';\n  categories.forEach((cat, idx) => {\n    if(cat.round === 1) buildCategoryCard(round1CatGrid, cat, idx);\n    else if(cat.round === 2) buildCategoryCard(round2CatGrid, cat, idx);\n    else buildCategoryCard(hiddenCatGrid, cat, idx);\n  });\n}\n\nfunction buildRound3CategoryCards(){\n  round3CatGrid.innerHTML = '';\n  round3Categories.forEach((cat, idx) => {\n    const el = document.createElement('div');\n    el.className = 'card';\n    el.dataset.key = cardKey('r3cat', idx);\n    el.innerHTML = `<div class=\"cat-name\">${cat.name}<\/div><div class=\"cat-meta\">2 QUESTIONS &middot; 15 PTS<\/div>`;\n    el.addEventListener('click', () => openSet('r3cat', idx, cat.name, cat.questions, () => 15));\n    round3CatGrid.appendChild(el);\n  });\n}\n\nfunction buildRound3FinalCards(){\n  round3FinalGrid.innerHTML = '';\n  round3Final.forEach((item, idx) => {\n    const el = document.createElement('div');\n    el.className = 'card';\n    el.dataset.key = cardKey('r3final', idx);\n    el.innerHTML = `<div class=\"cat-name\">Final Question ${idx+1}<\/div><div class=\"cat-meta\">15 PTS<\/div>`;\n    el.addEventListener('click', () => openSet('r3final', idx, 'Round 3 Final &middot; Q' + (idx+1), [item], () => 15));\n    round3FinalGrid.appendChild(el);\n  });\n}\n\nfunction buildRound3Cards(){\n  round3Grid.innerHTML = '';\n  round3.forEach((item, idx) => {\n    const el = document.createElement('div');\n    el.className = 'card';\n    el.dataset.key = cardKey('r3', idx);\n    el.innerHTML = `<div class=\"cat-name\">Question ${idx+1}<\/div><div class=\"cat-meta\">GENERAL KNOWLEDGE<\/div>`;\n    el.addEventListener('click', () => openSet('r3', idx, 'Round 3 \u00b7 Q' + (idx+1), [item], () => item.points));\n    round3Grid.appendChild(el);\n  });\n}\n\nfunction buildVideoCards(){\n  videoGrid.innerHTML = '';\n  videoRound.forEach((item, idx) => {\n    const el = document.createElement('div');\n    el.className = 'card';\n    el.dataset.key = cardKey('vid', idx);\n    el.innerHTML = `<div class=\"cat-name\">${item.label}<\/div><div class=\"cat-meta\">NEEDS Q&amp;A<\/div>`;\n    el.addEventListener('click', () => openSet('vid', idx, item.label, [item], () => item.points));\n    videoGrid.appendChild(el);\n  });\n}\n\nfunction buildButcherCard(){\n  butcherGrid.innerHTML = '';\n  const el = document.createElement('div');\n  el.className = 'card disabled';\n  el.innerHTML = `<div class=\"cat-name\">Not ready yet<\/div><div class=\"cat-meta\">WAITING ON ED'S CLIPS<\/div>`;\n  butcherGrid.appendChild(el);\n}\n\nfunction markDone(type, idx){\n  completed.add(cardKey(type, idx));\n  const el = document.querySelector(`[data-key=\"${cardKey(type, idx)}\"]`);\n  if(el) el.classList.add('done');\n  updateProgressSummary();\n}\n\nfunction updateProgressSummary(){\n  document.getElementById('progressSummary').textContent =\n    completed.size + ' cleared this session';\n}\n\n\/* ============ STAGE LOGIC ============ *\/\nconst menuView = document.getElementById('menuView');\nconst stageView = document.getElementById('stageView');\nconst boardContent = document.getElementById('boardContent');\nconst stagePill = document.getElementById('stagePill');\nconst qProgress = document.getElementById('qProgress');\nconst revealBtn = document.getElementById('revealBtn');\nconst nextBtn = document.getElementById('nextBtn');\nconst prevBtn = document.getElementById('prevBtn');\nconst backBtn = document.getElementById('backBtn');\n\nfunction openSet(type, idx, title, items, pointsResolver){\n  currentSet = { type, idx, title, items, pointsResolver: pointsResolver || (() => 1) };\n  currentIndex = 0;\n  menuView.classList.add('hidden');\n  stageView.classList.add('active');\n  stagePill.textContent = title;\n  renderQuestion();\n}\n\nfunction closeSet(){\n  if(currentSet){ markDone(currentSet.type, currentSet.idx); }\n  stageView.classList.remove('active');\n  menuView.classList.remove('hidden');\n  currentSet = null;\n}\n\nfunction renderQuestion(){\n  const item = currentSet.items[currentIndex];\n  qProgress.textContent = `Question ${currentIndex+1} of ${currentSet.items.length}`;\n  prevBtn.disabled = currentIndex === 0;\n  revealBtn.textContent = 'Reveal Answer';\n  revealBtn.disabled = false;\n\n  if(currentSet.type === 'cat' || currentSet.type === 'r3cat'){\n    renderMultipleChoice(item);\n  } else if(currentSet.type === 'r3' || currentSet.type === 'r3final'){\n    renderOpenEnded(item);\n  } else if(currentSet.type === 'vid'){\n    renderVideo(item);\n  }\n  appendScorePanel();\n}\n\nfunction mediaBlockHtml(item){\n  let html = '';\n  if(item.media){\n    html += `<div class=\"media-note\">${item.media}<\/div>`;\n  }\n  if(item.image){\n    html += `<img decoding=\"async\" class=\"question-image\" src=\"${item.image}\" alt=\"Question image\">`;\n  }\n  return html;\n}\n\nfunction renderMultipleChoice(item){\n  boardContent.innerHTML = `\n    <div class=\"q-eyebrow\">Multiple Choice<\/div>\n    ${mediaBlockHtml(item)}\n    <div class=\"q-text\">${item.q}<\/div>\n    <div class=\"choices\" id=\"choicesRow\">\n      ${item.choices.map((c,i) => `<div class=\"choice\" data-i=\"${i}\">${String.fromCharCode(65+i)}) ${c}<\/div>`).join('')}\n    <\/div>\n    <div class=\"answer-panel\" id=\"answerPanel\">\n      <div class=\"answer-label\">Correct Answer<\/div>\n      <div class=\"answer-text\">${String.fromCharCode(65+item.answer)}) ${item.choices[item.answer]}<\/div>\n    <\/div>\n  `;\n\n  const choiceEls = boardContent.querySelectorAll('.choice');\n  choiceEls.forEach(el => {\n    el.addEventListener('click', () => {\n      if(el.classList.contains('locked')) return;\n      const picked = parseInt(el.dataset.i, 10);\n      if(picked === item.answer){\n        el.classList.add('correct');\n        choiceEls.forEach(c => c.classList.add('locked'));\n      } else {\n        el.classList.add('wrong');\n      }\n    });\n  });\n}\n\nfunction renderOpenEnded(item){\n  boardContent.innerHTML = `\n    <div class=\"q-eyebrow\">Open Answer<\/div>\n    ${mediaBlockHtml(item)}\n    <div class=\"q-text\">${item.q}<\/div>\n    <div class=\"answer-panel\" id=\"answerPanel\">\n      <div class=\"answer-label\">Answer<\/div>\n      <div class=\"answer-text\">${item.answer}<\/div>\n    <\/div>\n  `;\n}\n\nfunction renderVideo(item){\n  boardContent.innerHTML = `\n    <div class=\"q-eyebrow\">Name That Video<\/div>\n    <div class=\"q-text\">Play the clip and see who can name it first.<\/div>\n    <a class=\"video-link\" href=\"${item.url}\" target=\"_blank\" rel=\"noopener\">${item.url}<\/a>\n    <div class=\"clip-time\">${item.clip}<\/div>\n    <div class=\"placeholder-note\">Placeholder - add the actual question wording and correct answer here before the show.<\/div>\n    <div class=\"answer-panel\" id=\"answerPanel\">\n      <div class=\"answer-label\">Answer<\/div>\n      <div class=\"answer-text\">Not filled in yet<\/div>\n    <\/div>\n  `;\n}\n\nfunction appendScorePanel(){\n  const panel = document.createElement('div');\n  panel.className = 'score-panel';\n  const basePoints = currentSet.pointsResolver ? currentSet.pointsResolver() : 1;\n  const checkedIdx = new Set();\n  const doubledIdx = new Set();\n\n  function effectivePoints(idx){\n    return doubledIdx.has(idx) ? basePoints * 2 : basePoints;\n  }\n\n  if(teams.length === 0){\n    panel.innerHTML = `\n      <div class=\"score-panel-label\">Score This Question (worth ${basePoints} pts)<\/div>\n      <div class=\"no-teams-note\">No teams set up yet - add teams from the Scoreboard button above.<\/div>\n    `;\n    boardContent.appendChild(panel);\n    return;\n  }\n\n  panel.innerHTML = `\n    <div class=\"score-panel-label\">Score This Question - worth ${basePoints} pts - check every team that got it right<\/div>\n    <div class=\"score-team-grid\" id=\"scoreTeamGrid\"><\/div>\n    <button class=\"doubler-btn\" id=\"doublerBtn\">&#9734; Double Points For A Team<\/button>\n    <div class=\"doubler-popup hidden\" id=\"doublerPopup\">\n      <div class=\"doubler-popup-label\">Which team(s) get doubled points on this question?<\/div>\n      <div class=\"doubler-popup-list\" id=\"doublerPopupList\"><\/div>\n      <button class=\"action secondary small\" id=\"doublerDoneBtn\">Done<\/button>\n    <\/div>\n  `;\n  boardContent.appendChild(panel);\n\n  const grid = panel.querySelector('#scoreTeamGrid');\n  const checkboxEls = [];\n\n  teams.forEach((team, idx) => {\n    const item = document.createElement('label');\n    item.className = 'score-team-item';\n    item.innerHTML = `<input type=\"checkbox\" data-idx=\"${idx}\"><span class=\"team-label-text\">${escapeHtml(team.name)} (+${effectivePoints(idx)})<\/span>`;\n    grid.appendChild(item);\n\n    const checkbox = item.querySelector('input');\n    checkboxEls.push({ checkbox, item, idx });\n\n    checkbox.addEventListener('change', () => {\n      if(checkbox.checked){\n        team.points += effectivePoints(idx);\n        item.classList.add('checked');\n        checkedIdx.add(idx);\n      } else {\n        team.points = Math.max(0, team.points - effectivePoints(idx));\n        item.classList.remove('checked');\n        checkedIdx.delete(idx);\n      }\n      saveTeams();\n    });\n  });\n\n  function refreshTeamLabel(idx){\n    const entry = checkboxEls.find(c => c.idx === idx);\n    if(entry){\n      entry.item.querySelector('.team-label-text').textContent = `${teams[idx].name} (+${effectivePoints(idx)})${doubledIdx.has(idx) ? ' \\u2605' : ''}`;\n      entry.item.classList.toggle('doubled', doubledIdx.has(idx));\n    }\n  }\n\n  function refreshDoublerBtnLabel(){\n    if(doubledIdx.size === 0){\n      doublerBtn.innerHTML = '&#9734; Double Points For A Team';\n      doublerBtn.classList.remove('on');\n    } else {\n      const names = [...doubledIdx].map(i => teams[i].name).join(', ');\n      doublerBtn.innerHTML = `&#9733; Doubled: ${escapeHtml(names)}`;\n      doublerBtn.classList.add('on');\n    }\n  }\n\n  const doublerBtn = panel.querySelector('#doublerBtn');\n  const doublerPopup = panel.querySelector('#doublerPopup');\n  const doublerPopupList = panel.querySelector('#doublerPopupList');\n  const doublerDoneBtn = panel.querySelector('#doublerDoneBtn');\n\n  doublerPopupList.innerHTML = '';\n  teams.forEach((team, idx) => {\n    const label = document.createElement('label');\n    label.className = 'doubler-popup-item';\n    label.innerHTML = `<input type=\"checkbox\" data-idx=\"${idx}\"><span>${escapeHtml(team.name)}<\/span>`;\n    doublerPopupList.appendChild(label);\n\n    const cb = label.querySelector('input');\n    cb.addEventListener('change', () => {\n      const wasChecked = checkedIdx.has(idx);\n      if(cb.checked){\n        doubledIdx.add(idx);\n        if(wasChecked){ team.points += basePoints; }\n      } else {\n        doubledIdx.delete(idx);\n        if(wasChecked){ team.points = Math.max(0, team.points - basePoints); }\n      }\n      if(wasChecked) saveTeams();\n      refreshTeamLabel(idx);\n      refreshDoublerBtnLabel();\n    });\n  });\n\n  doublerBtn.addEventListener('click', () => {\n    doublerPopup.classList.toggle('hidden');\n  });\n  doublerDoneBtn.addEventListener('click', () => {\n    doublerPopup.classList.add('hidden');\n  });\n}\n\nrevealBtn.addEventListener('click', () => {\n  const panel = document.getElementById('answerPanel');\n  if(panel){\n    panel.classList.toggle('shown');\n    revealBtn.textContent = panel.classList.contains('shown') ? 'Hide Answer' : 'Reveal Answer';\n  }\n});\n\nnextBtn.addEventListener('click', () => {\n  if(currentIndex < currentSet.items.length - 1){\n    currentIndex++;\n    renderQuestion();\n  } else {\n    closeSet();\n  }\n});\n\nprevBtn.addEventListener('click', () => {\n  if(currentIndex > 0){\n    currentIndex--;\n    renderQuestion();\n  }\n});\n\nbackBtn.addEventListener('click', closeSet);\n\n\/* ============ SCOREBOARD MODAL ============ *\/\nconst scoreboardModal = document.getElementById('scoreboardModal');\nconst openScoreboardBtn = document.getElementById('openScoreboardBtn');\nconst closeScoreboardBtn = document.getElementById('closeScoreboardBtn');\nconst leaderboardRows = document.getElementById('leaderboardRows');\nconst modalNewTeamInput = document.getElementById('modalNewTeamInput');\nconst modalAddTeamBtn = document.getElementById('modalAddTeamBtn');\n\nfunction openScoreboard(){\n  scoreboardModal.classList.remove('hidden');\n  renderLeaderboard();\n}\nfunction closeScoreboardModal(){\n  scoreboardModal.classList.add('hidden');\n}\n\nopenScoreboardBtn.addEventListener('click', openScoreboard);\ncloseScoreboardBtn.addEventListener('click', closeScoreboardModal);\nscoreboardModal.addEventListener('click', (e) => {\n  if(e.target === scoreboardModal) closeScoreboardModal();\n});\n\nfunction renderLeaderboard(){\n  leaderboardRows.innerHTML = '';\n\n  if(teams.length === 0){\n    leaderboardRows.innerHTML = `<div class=\"no-teams-note\">No teams yet - add one below to get started.<\/div>`;\n    return;\n  }\n\n  const sorted = teams\n    .map((team, originalIdx) => ({ team, originalIdx }))\n    .sort((a,b) => b.team.points - a.team.points);\n\n  sorted.forEach((entry, rank) => {\n    const row = document.createElement('div');\n    row.className = 'lb-row';\n    row.innerHTML = `\n      <div class=\"lb-rank\">${rank+1}<\/div>\n      <input type=\"text\" value=\"${escapeHtml(entry.team.name)}\" data-idx=\"${entry.originalIdx}\" data-field=\"name\">\n      <input type=\"number\" value=\"${entry.team.points}\" data-idx=\"${entry.originalIdx}\" data-field=\"points\">\n      <button class=\"lb-remove\" data-idx=\"${entry.originalIdx}\" title=\"Remove team\">&times;<\/button>\n    `;\n    leaderboardRows.appendChild(row);\n  });\n\n  leaderboardRows.querySelectorAll('input[data-field=\"name\"]').forEach(input => {\n    input.addEventListener('input', () => {\n      teams[parseInt(input.dataset.idx,10)].name = input.value;\n      saveTeams();\n    });\n  });\n  leaderboardRows.querySelectorAll('input[data-field=\"points\"]').forEach(input => {\n    input.addEventListener('input', () => {\n      const val = parseInt(input.value, 10);\n      teams[parseInt(input.dataset.idx,10)].points = isNaN(val) ? 0 : val;\n      saveTeams();\n    });\n    input.addEventListener('change', renderLeaderboard);\n  });\n  leaderboardRows.querySelectorAll('.lb-remove').forEach(btn => {\n    btn.addEventListener('click', () => {\n      teams.splice(parseInt(btn.dataset.idx,10), 1);\n      saveTeams();\n      renderLeaderboard();\n    });\n  });\n}\n\nmodalAddTeamBtn.addEventListener('click', () => addTeamFromInput(modalNewTeamInput, renderLeaderboard));\nmodalNewTeamInput.addEventListener('keydown', (e) => {\n  if(e.key === 'Enter'){ e.preventDefault(); addTeamFromInput(modalNewTeamInput, renderLeaderboard); }\n});\n\n\/* ============ INIT ============ *\/\nbuildCategoryCards();\nbuildRound3CategoryCards();\nbuildRound3FinalCards();\nbuildRound3Cards();\nbuildVideoCards();\nbuildButcherCard();\nupdateProgressSummary();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Musicology Trivia Night [ Placeholder &#8211; swap in the real Musicology logo here ] Enter Trivia Night \u2192 Musicology Trivia Game Rules General Rules No Phones: Put away all phones and smart devices, no cheating allowed! Have Fun: Keep it friendly and enjoy the game! Overview The game consists of 2 main rounds, a mid-game [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":9,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}