/**
* Wordfind.js 0.0.1
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation:
*     http://github.com/bunkat/wordfind
*/



#main {
  margin: 0 auto;
 /* max-width: 80rem; */
  text-align: center; /* to center #puzzle on small devices */
}
@media only screen and (min-width: 600px) {
  #main {
    text-align: left;
  }
}

/**
* Styles for the puzzle
*/
#puzzle {
  --grid-size: 9; /* valeur par défaut, écrasée en ligne par le JS */
  position: relative; /* ancre pour les traits de surlignage "stabilo" */
  display: inline-block;
  border: 1px solid black;
  padding: 3vw;
}

#puzzle > div { /* rows */
  width: 100%;
  margin: 0 auto;
}

#puzzle, .puzzleSquare {
  touch-action: none;           /* empêche scroll/zoom natif sur la grille */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;  /* évite le menu contextuel iOS au appui long */
}
/* style for each square in the puzzle */
.puzzleSquare {
  position: relative; /* pour rester au-dessus des traits de surlignage */
  z-index: 2;
  height: calc(63vw / var(--grid-size));
  width: calc(63vw / var(--grid-size));
  text-transform: uppercase;
  background-color: transparent;
  border: 0;
  font-size: calc(40vw / var(--grid-size));
  font-family: sans-serif;
  padding:0;
  color:black
}
@media only screen and (min-width: 600px) {
  #puzzle {
   
    padding: 1rem;
  }
  .puzzleSquare {
    height: calc(31.5rem / var(--grid-size));
    width: calc(31.5rem / var(--grid-size));
    font-size: calc(20.5rem / var(--grid-size));
  }
}

button::-moz-focus-inner {
  border: 0;
}

/**
* Effet "stabilo" : un trait continu et semi-transparent est dessiné
* derrière les lettres (par wordfindgame.js, en fonction des coordonnées
* réelles des cases), plutôt qu'une bordure ou un fond plein par case.
* Comme chaque trait est un calque translucide indépendant, deux mots qui
* se croisent s'assombrissent naturellement à l'intersection (superposition
* de transparences), sans logique supplémentaire à gérer.
*/
.stabilo-layer {
  position: absolute;
  inset: 0;
  z-index: 1; /* sous les lettres (.puzzleSquare a z-index: 2) */
  pointer-events: none;
}

.stabilo-mark {
  position: absolute;
  border-radius: 999px;
  /* transform-origin et transform sont fixés dynamiquement en JS, car ils
     dépendent de l'épaisseur du trait (elle-même dépend de la taille de
     case, qui varie selon les media queries ci-dessus). */
}

/* sélection en cours (pendant le glisser-déposer) */
.stabilo-mark--live {
  background-color: rgba(37, 99, 235, 0.35); /* bleu */
}

/* mot trouvé par le joueur */
.stabilo-mark--found {
  background-color: rgba(255, 213, 0, 0.55); /* jaune stabilo */
}

/* mot révélé via "Solve Puzzle" (pas trouvé par le joueur) */
.stabilo-mark--solved {
  background-color: rgba(219, 39, 119, 0.45); /* rose/violet, distinct du jaune */
}

/* indicates that all words have been found */
#puzzle .complete {
  color: white;
  background-color: #96e124;
}

/**
* Styles for the word list
*/
#words {
  display: inline-block;
  max-width: 30rem;
  /*padding: 1em;*/
  list-style-type: none;
  text-align: left;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
@media only screen and (min-width: 600px) {
  #words {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-gap: 20px;
  }
  words li {
  padding: 3px 0;
  
}
}

#words li {
  padding: 0;
  font: 1.2em sans-serif;
}

/* indicates that the word has been found */
.wordFound {
  text-decoration: line-through;
  color: gray;
}

/**
* Styles for the controls
*/
#controls {
  display: inline-block;
  max-width: 30rem;
  padding: 1em;
  border: none;
  text-align: center;
}
.controls{
	text-align: center;
}
label {
  white-space: nowrap;
  margin-top: 1em;
}
input {
  border: none;
  border-bottom: 1px solid #ccc;
  font-size: 1em;
}
input[type="number"] {
  width: 2rem;
}
select {
  max-width: 10rem;
}
#create-grid, #solve {
  display: inline-block;
  margin-top: 1rem;
}
#secret-word {
  text-transform: uppercase;
}

#result-message {
  font-size: 1.2em;
}
 /* Modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        animation: fadeIn 0.3s ease;
    }

    .modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        background: white;
        padding: 30px;
        border-radius: 12px;
        max-width: 500px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        animation: slideUp 0.3s ease;
    }

    .modal-content h3, .modal-content h2{
        margin-top: 0;
        
        font-size: 1.5rem;
    }
	
    .modal-content ul {
        line-height: 1.8;
        padding-left: 20px;
    }

    .modal-content li {
        margin-bottom: 10px;
    }

    .close-modal {
        background: #64748b;
        margin-top: 20px;
        width: 100%;
    }

    .close-modal:hover {
        background: #475569;
    }

     .success-modal .modal-content {
        text-align: center;
        padding: 40px;
    }

    .success-modal h3 {
        font-size: 2rem!important;
        margin-bottom: 10px;
    }

    .success-emoji {
        font-size: 4rem;
        margin-bottom: 20px;
    }
	.close-modal {
    background: #64748b;
    margin-top: 20px;
    width: 100%;
}
	.modal-content h3 {
    margin-top: 0;
    color: #3b82f6;
    font-size: 1.5rem;
}
	
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            transform: translateY(30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes bounce {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
	
	.controls button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.1s ease;
        letter-spacing: 1px!important;
    }

    .controls button:hover {
        background: #1d4ed8;
    }

    .controls button:active {
        transform: scale(0.96);
    }
	
	.controls button:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .controls button:disabled:hover {
        background: #94a3b8;
        transform: none;
    }

    .controls #rulesBtn {
        background: #6366f1;
        font-weight: 600;
        padding: 10px 14px;
    }

    .controls #rulesBtn:hover {
        background: #4f46e5;
    }
	
	.controls .btn-icon {
  position: relative;
  /* tes styles de bouton */
}
	
	.mytooltip {
  position:absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #222;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.btn-icon:hover .mytooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}