/* Zone de jeu Taquin : consigne, temps et coups, plateau carre (une piece
   = un bouton portant son morceau d image), message de verdict, bouton
   MELANGER et bouton du modele. Tout est DOM, aucun canvas. */
.tq-jeu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 92px 12px max(12px, env(safe-area-inset-bottom)); box-sizing: border-box; z-index: 1; background-color: var(--fond, #111111); background-size: cover; background-position: center; }
.tq-jeu:not([style*="background-image: url"]) { background-image: radial-gradient(ellipse 75% 50% at 50% 45%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, rgba(255, 255, 255, 0) 2px 24px); }
.tq-jeu[hidden] { display: none; }
.tq-consigne { margin: 0; max-width: 440px; color: #ffffff; font-weight: 900; font-size: clamp(14px, 4vw, 20px); text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.tq-consigne[hidden] { display: none; }
.tq-logo { max-height: 44px; max-width: 50vw; object-fit: contain; }
.tq-logo[hidden] { display: none; }

/* Temps et coups : deux pastilles. Les dix dernieres secondes passent au
   rouge et battent. */
.tq-hud { display: flex; gap: 10px; }
.tq-hud[hidden] { display: none; }
.tq-pastille { margin: 0; min-width: 84px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #ffffff; font-weight: 900; font-size: clamp(15px, 4.2vw, 20px); font-variant-numeric: tabular-nums; text-align: center; }
.tq-hud.tq-urgent .tq-temps { background: #c62828; animation: tq-battement .5s ease-in-out infinite; }

.tq-hote { width: min(88vw, 56vh, 440px); }
.tq-hote[hidden] { display: none; }
/* Cadre : bordure dans la couleur de la campagne. Le plateau garde le
   ratio carre ; les pieces y sont positionnees en absolu par transform. */
.tq-cadre { position: relative; padding: 6px; border-radius: 16px; background: var(--tq-couleur, #ff842b); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.tq-plateau { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .55); }
.tq-piece { position: absolute; top: 0; left: 0; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .55); box-sizing: border-box; background-color: #333333; background-repeat: no-repeat; cursor: pointer; transition: transform .14s ease-out, border-color .3s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tq-piece:disabled { cursor: default; }
.tq-piece:focus-visible { outline: 3px solid #ffffff; outline-offset: -4px; z-index: 1; }
.tq-plateau.tq-immediat .tq-piece { transition: none; }
/* Le trou : la derniere piece, invisible pendant la partie. */
.tq-piece.tq-trou { opacity: 0; pointer-events: none; transition: transform .14s ease-out, opacity .35s; }
.tq-cadre.tq-complet .tq-piece.tq-trou { opacity: 1; }
/* Image reconstituee : plus de joints entre les pieces. */
.tq-cadre.tq-complet .tq-piece { border-color: transparent; }
.tq-numero { position: absolute; top: 4px; left: 6px; color: #ffffff; font-weight: 900; font-size: clamp(11px, 3vw, 16px); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); pointer-events: none; }
.tq-numero[hidden] { display: none; }
.tq-cadre.tq-complet .tq-numero { display: none; }
.tq-piece.tq-refus { animation: tq-refus .3s ease-out; }

/* Modele : l image entiere par-dessus le plateau, sans bloquer le doigt. */
.tq-modele { position: absolute; inset: 6px; border-radius: 10px; background-size: cover; background-position: center; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); animation: tq-apparition .2s ease-out; }
.tq-modele[hidden] { display: none; }

.tq-cadre.tq-reussi { animation: tq-victoire .7s ease-out; }
.tq-cadre.tq-rate .tq-plateau { filter: grayscale(.8) brightness(.7); transition: filter .4s; }

.tq-message { margin: 0; color: var(--jeu-hud-texte, #ffffff); font-weight: 900; font-size: clamp(18px, 5vw, 26px); letter-spacing: .05em; text-align: center; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.tq-message[hidden] { display: none; }

.tq-boutons { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tq-bouton { border: none; border-radius: 999px; padding: 15px 40px; background: var(--jeu-bouton-fond); color: var(--jeu-bouton-texte); font-family: inherit; font-weight: 900; font-size: clamp(16px, 4.6vw, 21px); letter-spacing: .08em; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tq-bouton:focus-visible, .tq-modele-bouton:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.tq-bouton[hidden] { display: none; }
.tq-modele-bouton { border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; padding: 8px 22px; background: rgba(0, 0, 0, .35); color: #ffffff; font-family: inherit; font-weight: 800; font-size: clamp(13px, 3.6vw, 16px); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tq-modele-bouton[hidden] { display: none; }

@keyframes tq-battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tq-refus { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(198, 40, 40, 0); } 40% { box-shadow: inset 0 0 0 4px rgba(198, 40, 40, .95); } }
@keyframes tq-apparition { from { opacity: 0; } to { opacity: 1; } }
@keyframes tq-victoire { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: 0 0 40px var(--tq-couleur, #ff842b); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tq-piece, .tq-piece.tq-trou { transition: none; }
  .tq-hud.tq-urgent .tq-temps, .tq-cadre.tq-reussi, .tq-piece.tq-refus, .tq-modele { animation: none; }
}
@media (min-height: 900px) { .tq-jeu { padding-top: 120px; } }