<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;"> .hive {
   position: relative;
   width: 220px;
   height: 220px;
   margin: 0 auto 1em auto;
 }



 .apegramma,
 .apegramma a,
 .titleGiochi,
 .colorFontGiochi a {
   color: #6c3d19;
   font-family: 'Fredoka', sans-serif;
 }

 .colorFontGiochi.border-bottom {
   border-bottom: 1px solid #e6c200 !important;
 }

 .cell {
   width: 60px;
   height: 60px;
   font-size: 1.5em;
   background: gold;
   border: 2px solid gold;
   clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   text-transform: uppercase;
   position: absolute;
   transition: transform 0.2s, background-color 0.3s;
   outline: none;
 }

 .cell:focus {
   box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.5);
 }

 .cell.central {
   background: orange;
   border: 2px solid orange;
   z-index: 2;
 }

 .cell:active {
   transform: scale(1.2);
 }

 .cell:hover {
   background-color: #f5d442;
 }

 #inputWord {
   font-size: 1.2em;
   margin: 0.5em;
   border: 2px solid #e6c200;
   border-radius: 5px;
   padding: 0.5em;
   transition: all 0.3s ease;
 }

 #inputWord.valid {
   border-color: #28a745;
   background-color: rgba(40, 167, 69, 0.1);
 }

 #inputWord.invalid {
   border-color: #dc3545;
   background-color: rgba(220, 53, 69, 0.1);
 }

 #controls {
   margin-bottom: 1em;
 }

 #checkBtn,
 #resetBtn,
 #shuffleBtn,
 .btn-apegramma {
   background-color: gold;
   border: none;
   color: black;
   box-shadow: 0 4px 6px rgba(212, 175, 55, 0.4);
   font-size: 1.2em;
   padding: 0.5em 1em;
   margin: 0 5px;
   cursor: pointer;
 }

 #checkBtn:hover,
 #shuffleBtn:hover,
 #resetBtn:hover,
 .btn-apegramma:hover {
   background-color: #e6c200;
   box-shadow: 0 4px 8px rgba(212, 175, 55, 0.6);
 }

 #fullResetBtn {
   background-color: orange;
   border: none;
   color: black;
   box-shadow: 0 4px 6px rgba(255, 165, 0, 0.4);
   font-size: 1.2em;
   padding: 0.5em 1em;
   margin: 0 5px;
   cursor: pointer;
 }

 #fullResetBtn:hover {
   background-color: #e69500;
   box-shadow: 0 4px 8px rgba(255, 165, 0, 0.6);
 }

 #bestScore, #score {
   font-weight: bold;
   font-size: 1em;
   margin-top: 1em;
 }

 #foundWords {
   margin-top: 1em;
   text-align: left;
   display: none;
 }

 #timer {
   font-size: 1em;
   /*margin-top: 1em;*/
   color: #dc3545;
   font-weight: bold;
 }

 .apegramma .alert-info {
   background: #fffbe6;
   border: 1px solid rgba(255, 165, 0, 0.6);
   color: #6c3d19;
 }

 #wordList {
   columns: 2;
   column-gap: 20px;
   list-style-type: none;
   padding-left: 0;
 }

 #wordList li {
   margin-bottom: 5px;
   padding: 5px;
   background-color: #fffbe6;
   border-radius: 3px;
   break-inside: avoid;
 }



.img-apegramma {
    width: 50px;
}
@media (min-width: 768px) {
    .img-apegramma {
        width: 80px;
    }
     .fs-md-2 {
  font-size:2rem !important;
 }
}

 @media (max-width: 480px) {
   .hive {
     width: 250px;
     height: 250px;
   }

   .cell {
     width: 70px;
     height: 70px;
     font-size: 1.8em;
   }

   #inputWord {
     width: 100%;
     font-size: 1.2em;
   }

   #controls button {
     display: inline-block;
     margin: 0.3em 0.2em;
   }

   #wordList {
     columns: 1;
   }
 }

 /* Animazioni e transizioni */
 @keyframes pulse {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.1);
   }

   100% {
     transform: scale(1);
   }
 }

 .pulse {
   animation: pulse 0.5s;
 }

 /* ModalitÃ&nbsp; dark per rispettare le preferenze utente */
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #222;
     color: #eee;
   }

   .apegramma {
     color: #fcba7d;
   }

   .apegramma .alert-info {
     background: #333;
     border-color: #f5a742;
     color: #fcba7d;
   }

   #wordList li {
     background-color: #333;
   }
 }

 .fa-star-grey {
   color: #b0b0b0 !important;
   /* grigio chiaro */
 }

 .fa-star-blue {
   color: #3498db !important;
   /* blu */
 }

 .fa-star-green {
   color: #2ecc71 !important;
   /* verde */
 }

 .fa-star-cyan {
   color: #1abc9c !important;
   /* azzurro / turchese */
 }

 .fa-star-purple {
   color: #9b59b6 !important;
   /* viola */
 }

 .fa-star-red {
   color: #e74c3c !important;
   /* rosso */
 }

 .fa-star-gold {
   color: #f1c40f !important;
   /* oro */
 }
 
  .share-btn:hover {
    background-color: #e0e0e0;
  }
  </pre></body></html>