.game0 .card {
  border-style: dashed;
  box-shadow: 7px 7px 0 var(--card-dark);
}


.card-body.score,
.card-body.game{
    background: #f4f4f4;
}

.card-header.score{
    background: linear-gradient(
        0deg,
        hsl(calc(var(--hb) + 20), 95%, 40%),
        hsl(calc(var(--hb) + 20), 95%, 95%)
    );
}
#game-zone input[type="text"]{
    padding: 0; margin: 0;
    border: solid 0px black; 
        border-bottom:#777 solid 0.5px;

    border-radius: 5px;
    outline: none;
    background-color: white;
    font-family: monospace;
    box-sizing: content-box; /* important pour que width = 1ch réel */
}
#game-zone input[type="text"]:focus{
}
#answers,
#hint,
#game-zone{
    width: 100%;
    padding:0;
    background: hsl(60, 100%, 97%);
    border-radius: 10px;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    border: solid 2px black;
      user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#hint{
    margin-top: 0.3em;
    padding:0.3em;
    background-color: AntiqueWhite;
    font-style: italic;
        box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),   /* bas */
        inset 0 -2px 5px rgba(255,255,255,0.9),  /* haut */
        inset 2px 0 5px rgba(255,255,255,0.9),   /* droite */
        inset -2px 0 5px rgba(255,255,255,0.9);  /* gauche */
}
#answers{
    background: #fff;
        color:darkblue;

}

#game-zone table,
#answers table{
    margin-left: auto;
    margin-right: auto;
}


#game-zone td,
#answers th,
#answers td{
    padding: 5px;
}
#answers table.verif{
    background:hsl(calc(var(--hb) + 20), 95%, 60%) ;
    background: linear-gradient(
        to right,
        
       
        hsl(var(--h), 0%, 70%)0%,
        hsl(var(--h), 90%, 100%)30%,

        hsl(var(--h), 90%, 50%) 100%
    );

    overflow: hidden;
        border-radius: 10px 10px 0 0;

}
td.verif{
    background: linear-gradient(
        to bottom,
        hsl(var(--h), 0%, 90%) 0%,
        hsl(var(--h), 100%, 100%) 30%,
         hsl(var(--h), 100%, 100%) 70%,
        hsl(var(--h), 90%, 50%)100%
    );
        background:none;

    border:1px solid transparent;

}
td.verif:first-child{
    border-radius: 10px 0px 0 0px;

}
td.verif:last-child{
    border-radius: 0px 10px 0 0px;

}
td.response{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    gap:10px;
    padding-left: 25px!important;
    border:1px solid black;
    border-radius: 10px;
}
.nogood,
.good{
    visibility: hidden;
}
.correct { 
    color: green; 
    stroke:green;
}
#animGif{
    height: 80px;
    text-align: center;
}
#animGif img{
    width:70px;
    margin: 20px auto;
}
.btn-game {
    display: block;
    padding: 0.6em 1em;
    border-radius: 1.5em;
    font-weight: bold;
    border: none;
    padding:0.3rem 0.8rem;

    color: #444;
    cursor: pointer;
    background: linear-gradient(
        to bottom,
        hsl(var(--h), 85%, 92%) 0%,
        hsl(var(--h), 85%, 70%) 45%,
        hsl(var(--h), 85%, 50%) 100%
    );

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.9),   /* lumière haute */
        inset 0 -2px 4px rgba(0,0,0,0.15),       /* ombre basse interne */
        0 4px 8px rgba(0,0,0,0.25);              /* relief externe */

    transition: all 0.12s ease;
    border: 1px solid rgba(0,0,0,0.15);
    border-top:none;

}
.card-body.game0 .btn-game:hover {
    color:black;
}
.card-body.game0 .btn-game:active {
    transform: translateY(2px);

    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.25),
        0 1px 3px rgba(0,0,0,0.2);
}

.btn-game {
    position: relative; /* important pour le reflet */
    display: block;
    padding: 0.3em 0.8em;
    border-radius: 1.5em;
    font-weight: bold;
    height: 33px;
    border: none;
    font-size: smaller;
    font-family: inherit;
    color: #000;
    cursor: pointer;
    overflow: hidden; /* pour que le reflet respecte l'arrondi */
    margin: 0;
    text-shadow: 0 1px 3px rgba(255,255,255,0.9);

    background: linear-gradient(
        to bottom,
        hsl(var(--h), 85%, 90%) 0%,
        hsl(var(--h), 85%, 65%) 45%,
        hsl(var(--h), 85%, 45%) 100%
    );

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.9),
        inset 0 -2px 4px rgba(0,0,0,0.15),
        0 4px 8px rgba(0,0,0,0.25);

 transition: all 0.15s ease, box-shadow 0.25s ease;
 z-index: 100;
}
.btn-game.mini{
    height: 20px;
    font-size: x-small;
}
 .btn-game::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 45%;
    border-radius: 40%;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.4) 60%,
        rgba(255,255,255,0) 100%
    );

    pointer-events: none;
        transition: all 0.3s ease;

}
.btn-game:hover::before {
        
    transform: scale(1.2);
}
#btnCheck:disabled,
.btn-game:active {
    transform: translateY(2px);

    box-shadow:
        inset 0 1.5px 2.5px rgba(255,255,255,0.7),   /* léger reflet interne haut */
        inset 0 -2px 3px rgba(0,0,0,0.15),           /* ombre interne basse subtile */
        0 1px 3px rgba(0,0,0,0.15);                  /* ombre externe douce */
}

.btn-game:hover{
    color:black;
    opacity: 1;
        box-shadow: none;

}
.btn:active {
    box-shadow:
        inset 0 2px 3px rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.2);
}
.game-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-game.link {
    text-decoration: none;
}

.game-topbar .btn-game {

}

#btnCheck{
    margin-left: auto;
    margin-right: 0;
}
.hidden0 {
    opacity: 0;
}

#answers,
#game-zone{
    padding: 0.5rem;
    overflow: auto;
}
#score-card{
    display: none;
}




.btn:disabled,
.btn:disabled:hover,
.btn.selected:hover,
.btn.selected {
    transform: translateY(2px); /* effet enfoncé */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    border-color: #888;
    cursor: default;                       /* curseur normal */

}

.title-conversion.data-game{
    font-weight: bold;
    text-align: center;
    border:none;
    background: none;
}
.data-game{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:0.3rem;
    padding:1rem 1rem;
    width: fit-content;
    border: solid 1px hsl(calc(var(--hb) + 180), 95%, 60%);
    border: none;
    border-radius: 5px;;
    margin:0.3rem auto;
    background: hsl(calc(var(--hb) + 0), 95%, 90%);
    font-size: large;
    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),   /* bas */
        inset 0 -2px 5px rgba(255,255,255,0.9),  /* haut */
        inset 2px 0 5px rgba(255,255,255,0.9),   /* droite */
        inset -2px 0 5px rgba(255,255,255,0.9);  /* gauche */
    box-shadow: 3px 3px 5px black;
    background: linear-gradient(
        to bottom,
        #ddd 10%,
        white 70%,

       hsl(var(--hb), 95%, 50%)100%
    );}
.data-game.nogap{
    gap:0;
        white-space: pre-wrap;

}
.text-hole,
.data-game.nogap input[type='text']{
    padding: 0;
    border: none;
    border-bottom: 2px solid black;
    background-color: transparent;
}
.data-game input{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-radius: 5px;
    width:min-content;
    box-shadow: inset 1px 1px 3px black;
    box-shadow:none;
    border:none;
}

.responses .qcm{
    text-align: center;
    padding:0.2em;
    font-weight: bold;
}

.word{
    width:100px;
    width: fit-content;
}
.sentence input,
.word input{
    width:100%;
}
.sentence{
    width: 300px;
}
.multi{
    display: block;
    width: 100%;
}
.multi input{
    width:fit-content;
}
.list-data {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.data-item {
    background-color: white;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px black;
}


.cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}


td.score{
white-space: nowrap!important;
}
td.score span.card-check {
    margin-left: 6px;
}
.verif td.score {
    white-space: nowrap !important;
}

.verif td.score .card-check {
    display: inline-block;
    margin-left: 4px;
}
.verif .ok{
    color:green;
    text-decoration: underline;
}
.verif .nok{
    color:darkred;
    text-decoration: underline;
}
.turned{
    background-color:hsl(var(--hb), 95%, 60%) ;
    padding: 1px 5px;
    border-radius: 4px;
}

.answers-container {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.answers-header {
    display: flex;
    justify-content: space-between; /* bouton à droite, reste à gauche */
    align-items: flex-start;
}

.answers-center {
    text-align: center;
    flex: 1;
}

.answers-body {
    margin-top: 1rem;
    text-align: center;
}

.btn-rejouer {
    align-self: flex-start; /* garantit bouton en haut droite du header */
}
.score.ok{
    background:#d4f8d4;
}
.score.nok{
    background:#ffd6d6;
}

.svg1{
    width:110px;
    height:110px;
}



.pronom{
font-weight:bold;
}








/* classique */

/* TITRE */
.titre {
    text-align: center;
}

/* BANQUE */

/* CENTRAGE */
.center {
    text-align: center;
    margin-top: 5px;
}



/* ZONE */
.drop-zone {
    min-height: 30px;
    min-width: 500px;
    border: 1px solid #bbb;
    border-radius: 2px;
    padding: 0px;
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    background: #fafafa;
}


.drop-zone0::before {
    content: "Déposer ici";
    color: #999;
    font-style: italic;
}


#cubeConvTable,
#convTable{
    margin:20px auto; 
    width:auto;
    border-collapse:collapse; 
    text-align:center;
}
#cubeConvTable th,
#convTable th{
    width:50px;
    padding:2px 5px;
    font-family: "Miniver";
}

.label-pool{
    display:flex;
    width: 100%;
    justify-content: center;
    height:30px;
}

.case.active{
    outline:4px solid white;
    outline-offset:-4px;
    box-shadow:
        inset 0 0 0 3px black;
}
.multiples-number.active{
    border: solid black 3px!important;
}