/* motmystere.css - responsive, cases carrées, list right / below on mobile */
/* motmystere.css - simple & responsive */
:root { --gap: 10px; --grid-size: 11; }

/*body { font-family: Arial, Helvetica, sans-serif; margin: 12px; background:#fafafa; color:#222; }*/
#app { display:flex; gap:20px; max-width:1100px; margin:0 auto; align-items:flex-start; }
#leftCol { flex:2; min-width:260px; }
/*#rightPanel { flex:1; min-width:220px; background:#fff; padding:12px; border-radius:6px; border:1px solid #eee; }*/
#rightPanel { flex:1; width:200px; background:#fff; margin-left: 20px; padding:12px; border-radius:6px; border:1px solid #eee; }

#controls { margin-bottom:8px; display:flex; gap:8px; flex-wrap:wrap; }
button{ padding:8px 12px; border-radius:6px; border:1px solid #ccc; background:#2d89ff; color:#fff; cursor:pointer; }
button:active { transform:translateY(1px); }

.grid { display:grid; grid-template-columns: repeat(var(--grid-size), 1fr); gap:4px; background:transparent; }
.cell { background:#fff; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; font-weight:700; border:1px solid #ddd; cursor:pointer; user-select:none; border-radius:4px; }
.cell.selected{ background:#ffe589; }
.cell.found{ background:#7ed957; color:#063; border-color:#4fa53c; }
.cell.disabled{ background:#efefef; color:#888; cursor:default; }

/* word list */
#wordList{ list-style:none; padding:0; margin:0; max-height:60vh; overflow:auto; }
#wordList li { padding:6px 4px; border-bottom:1px solid #f2f2f2; font-weight:700; }
#wordList li.found{ text-decoration:line-through; color:#4fa53c; }

/* mystere */
#mystereDefBox{ margin-top:12px; background:#f1f8ff; padding:8px; border-left:4px solid #2d89ff; border-radius:4px; }
#mystereInput{ width:100%; padding:8px; margin-top:8px; margin-bottom:6px; box-sizing:border-box; }

/* progress */
#progressDisplay{ margin-top:10px; font-weight:800; }
#progressDisplay:before {
	content:"Progress\0000E3o:\0000A0\0000A0";
/*	font-size: 15px;	*/
}
#progressDisplay:after {
/*	content:"\0000A0\00202F\000028\00202Fmots\00202F\000029";*/
	content:"\0000A0\00202Fpalavras";
/*	font-size: 15px;	*/
}

@media only screen and (max-width:700px){
.colonnemilieu {
	margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;
}/**/
	#app{flex-direction:column; gap: 10px; padding:8px; }
	#leftCol { flex:2; min-width:260px; margin-left: auto; margin-right: auto; }
  #container{flex-direction:column;padding:6px; margin: 0px;}
/*  #rightPanel{width:100%}*/
  #rightPanel{width:80%; margin-left: auto; margin-right: auto;}
/*  #grid{gap:4px}*/
  .grid{gap:0px; width: auto; margin-left: -10px; margin-right: -10px;}
/* ajouté l2 24/11/25 */

.cell{
	width: 26px;
	height: 26px;
	font-size: 13px;
	margin: 1px;
 } 
}

@media only screen and (min-width: 701px) and (max-width: 900px) {
	#app{flex-direction:column; gap: 5px; padding:4px; }
	#leftCol { flex:2; min-width:260px; margin-left: auto; margin-right: auto; }
	#rightPanel{width:50%; margin-left: auto; margin-right: auto;}
	.grid{gap:0px; width: auto; margin-left: auto; margin-right: auto;}

.cell{
	width: 32px;
	height: 32px;
	font-size: 16px;
	margin: 1px;
 } 
}


/* responsive: on empile sur mobile
@media(max-width:820px){
  #app{ flex-direction:column; padding:8px; }
  #rightPanel{ width:100%; order:2; }
  .grid { grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr)); gap:3px; }
  .cell{ font-size:0.95rem; }
} */