diff --git a/bocciofila/confetti.css b/bocciofila/confetti.css
index 7f85199..e1931b9 100644
--- a/bocciofila/confetti.css
+++ b/bocciofila/confetti.css
@@ -9,3 +9,10 @@
   position: relative;
   left: 30%;
 }
+#main {
+  background-image: url("./bgdottedeven.png");
+background-color:#fff4f6;
+  /* Additional background styles if needed */
+}
+*{cursor: url("pincursorsh.png"), default;}
+
diff --git a/bocciofila/index.html b/bocciofila/index.html
index 125a9c1..951e84f 100644
--- a/bocciofila/index.html
+++ b/bocciofila/index.html
@@ -1,23 +1,57 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Giochi della Ruota</title>
+  <head>
+<meta charset="utf-8">
+  <title></title>
   <link rel="stylesheet" href="style2.css">
 </head>
-<body>
+<body style="background-color:#fff4f6;" background="https://softheartclinic.neocities.org/Visuals/bgdottedeven.png">
   <button id="startButton">Avvia il gioco</button>
 
   <div id="gameContainer">
     <video id="gameVideo" controls>
       <source src="audiovideo.webm" type="video/mp4">
     </video>
-<button id="toggleButton">Fanculo Mancini, io mi drogo</button>
+    <button id="toggleButton">Fanculo Mancini, io mi drogo</button>
+
+<div class="my-clippy"></div>
+  <div id="legend-modal" class="modal" bgcolor="#ffe5e9">
+    <div class="modal-content">
+      <h2>Legenda</h2>
+      <ul>
+<li>Horny: sei horny per Riccardo, gli metti la mano sulla coscia e non la lasci più andare</li>
+<li>Egodeath: hai smesso di usare la prima persona singolare e plurale</li>
+<li>Pappagallo: ripeti a pappagallo tutto quello che dice Riccardo</li>
+<li>Gemello: ripeti tutte le azioni che Riccardo fa</li>
+<li>Desiderio: Riccardo esprime un desiderio, tu lo realizzi</li>
+<li>2 Desideri: Riccardo esprime due desideri, tu ne realizzi uno e fai il possibile per non</li>
+<li>Schiavo: Riccarrdo farà la prima cosa che gli chiedi. Non devi chiedere con gentilezza</li>
+<li>Niente nomi: amnesia collettiva, non ci ricordiamo i nostri nomi</li>
+<li>Trivia</li>
+<li>Complimento: fai un complimento a Riccardo. Non ho detto di non mentire</li>
+<li>Strip: un indumento giù, e Riccardo segue</li>
+<li>Flessioni: fai delle flessioni. Riccardo ne farà il doppio</li>
+<li>Scelte sbagliate: è arrivato il momento di ricordare a Riccardo quali scelte</li>
+<li>ha sbagliato nella vita</li>
+<li>Coro: Riccardo ti insegna un coro</li>
+<li>Selfie</li>
+<li>Sexy selfie</li>
+<li>Vocalino</li>
+<li>USA: gli stati uniti sono un paese pericoloso. Fai la Cassandra</li>
+<li>Culo al muro: tu e Riccardo vi odiate così tanto che tenete il culo attaccato</li>
+<li>al muro, ai punti opposti della stanza</li>
+<li>Verità: fai una domanda a Riccardo, deve rispondere sinceramente. Poi tocca a lui</li>
+      </ul>
+      <button id="close-button">Close</button>
+    </div>
+  </div>
     <div id="wheel"></div>
   </div>
   <div>
     <!-- <iframe id="gameIframe" src="./ruota.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe> -->
   </div>
 
+<script src="clippy.js" type="module"></script>
   <script src="script.js"></script>
 </body>
 </html>
diff --git a/bocciofila/ruota.html b/bocciofila/ruota.html
index 0f9608a..3963512 100644
--- a/bocciofila/ruota.html
+++ b/bocciofila/ruota.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class=" jgbadjndk idc0_347 snogapti vfohsnruzl" lang="en-US">
+<html class="" lang="en-US">
 
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
@@ -19,7 +19,8 @@
       <header class="site-header header-main-layout-1 ast-primary-menu-enabled ast-logo-title-inline ast-hide-custom-menu-mobile ast-menu-toggle-icon ast-mobile-header-inline" id="masthead" itemtype="https://schema.org/WPHeader" itemscope="itemscope" itemid="#masthead">
         </div>
       </header>
-      <div id="content" class="site-content">
+      <div id="content" class="site-content"   
+>
         <div class="ast-container">
           <div id="content" class="site-content" data-aos="fade-in">
             <div class="ast-container">
@@ -37,27 +38,32 @@
                         <div class="panels">
                           <div class="panel"> <label><textarea name="enter-names" class="enter-names" id="add-names" rows="10">
 Horny
-X punti con Ric
--X punti con Ric
+Punti
+Punti
+Egodeath
 Pappagallo
 Gemello
 Desiderio
 2 Desideri
 Schiavo
-Colluttorio
-TRIVIA
--X punti per Riccardo
+Niente nomi
+Trivia
+Punti
 Complimento
 Strip
 Flessioni
-X punti
+Bevi
+Punti
 Scelte sbagliate
-Sedia
+Schiavo
 Coro
 Selfie
 Sexy selfie
 Vocalino
 USA
+Culo al muro
+Bevi
+Verità
 </textarea></label></div>
                           <div class="panel">
                             <div class="results-list">
diff --git a/bocciofila/script.js b/bocciofila/script.js
index aced0ea..44b1ee9 100644
--- a/bocciofila/script.js
+++ b/bocciofila/script.js
@@ -82,3 +82,10 @@ toggleButton.addEventListener('click', function() {
     contentDiv.style.display = 'none';
   }
 });
+// document.getElementById("legend-button").addEventListener("click", function() {
+  // document.getElementById("legend-modal").style.display = "block";
+// });
+
+document.getElementById("close-button").addEventListener("click", function() {
+  document.getElementById("legend-modal").style.display = "none";
+});
diff --git a/bocciofila/style2.css b/bocciofila/style2.css
index 5fbe154..8b505d5 100644
--- a/bocciofila/style2.css
+++ b/bocciofila/style2.css
@@ -25,3 +25,37 @@ html, body {
   /* display: none; /\* Hides the container by default *\/ */
   margin: 0 auto; /* Centers the container horizontally */
 }
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 20% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 800px;
+}
+
+#legend-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+#legend-button img {
+  width: 80px;
+  height: 80px;
+  margin-right: 5px;
+}
+
+*{cursor: url("pincursorsh.png"), default;}
