/* =====================================================================
   Quatre-Quarts — styles propres au jeu (préfixe qq-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   ===================================================================== */

.qq-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond: linear-gradient(120deg, #3f2014, #6b3424 50%, #a4485d);
  --mgb-accent: #ffd59a;
  --mgb-titre: linear-gradient(100deg, #fff6ea, #ffc7d4);
  --mg-stat-largeur: 4.5em;
  --mg-fs-fond: #f7e6dc;
  --mg-bulle-fond: #4a2618;
  --qq-j1: #f5c518;
  --qq-j2: #3b82f6;
  --qq-s: 480px; /* côté du plateau (posé par game.js) */
  --qq-v: 70px; /* case de la vitrine (posée par game.js) */
}

.qq-jeu [hidden] {
  display: none !important;
}

.qq-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  /* papier peint de salon de thé */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    repeating-linear-gradient(90deg, #fbeee6 0 22px, #f7e2d8 22px 44px);
  box-shadow: inset 0 0 0 1px rgba(107, 52, 36, 0.12);
  user-select: none;
}

.qq-jeu.mg-fs .qq-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.qq-table {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px;
}

/* ---------- Pastilles des joueurs ---------- */
.qq-pastille {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  margin-right: 0.35em;
  vertical-align: -0.05em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.qq-pastille.j1 {
  background: var(--qq-j1);
}

.qq-pastille.j2 {
  background: var(--qq-j2);
}

/* ---------- Plateau : nappe vichy et assiettes ---------- */
.qq-plateau {
  flex: none;
  box-sizing: border-box;
  width: var(--qq-s);
  height: var(--qq-s);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--qq-s) * 0.022);
  padding: calc(var(--qq-s) * 0.04);
  border-radius: 18px;
  background:
    linear-gradient(rgba(214, 64, 84, 0.42) 50%, transparent 50%) 0 0 / calc(var(--qq-s) / 10) calc(var(--qq-s) / 10),
    linear-gradient(90deg, rgba(214, 64, 84, 0.42) 50%, transparent 50%) 0 0 / calc(var(--qq-s) / 10) calc(var(--qq-s) / 10),
    #fffaf6;
  box-shadow:
    0 14px 30px rgba(74, 38, 24, 0.25),
    inset 0 0 0 5px rgba(255, 255, 255, 0.65);
}

.qq-case {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: default;
  border-radius: 50%;
}

/* assiette */
.qq-case::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 52%, #eef0f3 53% 58%, #ffffff 60% 66%, #e3e6ea 100%);
  box-shadow: 0 3px 6px rgba(74, 38, 24, 0.25);
  transition: box-shadow 0.2s, transform 0.2s;
}

.qq-case.libre.actif {
  cursor: pointer;
}

.qq-case.libre.actif:hover::before,
.qq-case.libre.actif:focus-visible::before {
  box-shadow:
    0 0 0 4px var(--qq-tour, var(--qq-j1)),
    0 3px 6px rgba(74, 38, 24, 0.25);
}

.qq-case:focus-visible {
  outline: none;
}

.qq-case .qq-gateau {
  position: absolute;
  inset: -4% 0 4%;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.qq-case .qq-fantome {
  opacity: 0;
  transition: opacity 0.15s;
}

.qq-case.libre.actif:hover .qq-fantome,
.qq-case.libre.actif:focus-visible .qq-fantome {
  opacity: 0.45;
}

.qq-case.pose .qq-gateau {
  animation: qq-pose 0.35s cubic-bezier(0.3, 1.5, 0.6, 1);
}

@keyframes qq-pose {
  0% {
    transform: translateY(-30%) scale(1.15);
    opacity: 0;
  }
}

/* alignement gagnant */
.qq-case.gagnante::before {
  background: radial-gradient(circle at 50% 45%, #fff9e0 0 52%, #ffe08a 53% 58%, #fff3c4 60% 66%, #f5c518 100%);
  box-shadow:
    0 0 0 4px #f5c518,
    0 0 22px rgba(245, 197, 24, 0.9);
}

.qq-case.gagnante .qq-gateau {
  animation: qq-saut 0.7s ease-in-out infinite alternate;
}

.qq-case.gagnante:nth-child(4n + 2) .qq-gateau {
  animation-delay: 0.12s;
}

.qq-case.gagnante:nth-child(4n + 3) .qq-gateau {
  animation-delay: 0.24s;
}

.qq-case.gagnante:nth-child(4n + 4) .qq-gateau {
  animation-delay: 0.36s;
}

@keyframes qq-saut {
  to {
    transform: translateY(-7%);
  }
}

/* ---------- Côté : statut, gâteau à poser, vitrine ---------- */
.qq-cote {
  flex: none;
  width: calc(var(--qq-v) * 4 + 46px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qq-statut {
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 14px;
  border-radius: 12px;
  background: #fffaf6;
  color: #4a2618;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgba(74, 38, 24, 0.12);
  border-left: 6px solid var(--qq-tour, var(--qq-j1));
}

.qq-statut .qq-pastille {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.6em;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.qq-statut.pense .qq-pastille {
  animation: qq-pense 0.8s ease-in-out infinite alternate;
}

@keyframes qq-pense {
  to {
    transform: scale(0.55);
  }
}

.qq-etiquette {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a44;
  margin: 0 0 6px 4px;
}

.qq-main-cadre {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qq-main-cadre .qq-etiquette {
  margin: 0 0 0 4px;
  writing-mode: horizontal-tb;
}

.qq-main {
  position: relative;
  width: calc(var(--qq-v) * 1.25);
  height: calc(var(--qq-v) * 1.25);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffffff 0 52%, #eef0f3 53% 58%, #ffffff 60% 66%, #e3e6ea 100%);
  box-shadow:
    0 0 0 4px var(--qq-tour, var(--qq-j1)),
    0 6px 14px rgba(74, 38, 24, 0.25);
}

.qq-main .qq-gateau {
  position: absolute;
  inset: -6% 0 6%;
  width: 100%;
  height: 100%;
}

.qq-main.arrive .qq-gateau {
  animation: qq-arrive 0.4s ease-out;
}

@keyframes qq-arrive {
  0% {
    transform: scale(0.4) rotate(-12deg);
    opacity: 0;
  }
}

.qq-main-vide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72em;
  color: #a08070;
  padding: 10%;
}

/* vitrine de pâtissier : étagères vitrées */
.qq-vitrine-cadre {
  padding: 10px 12px 14px;
  border-radius: 16px;
  background: linear-gradient(#8a4b2e, #6b3424);
  box-shadow:
    0 10px 24px rgba(74, 38, 24, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

.qq-vitrine-cadre .qq-etiquette {
  color: #ffd59a;
}

.qq-vitrine {
  display: grid;
  grid-template-columns: repeat(4, var(--qq-v));
  grid-auto-rows: var(--qq-v);
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background:
    linear-gradient(transparent calc(100% - 5px), rgba(255, 255, 255, 0.5) calc(100% - 5px)) 0 0 / 100% calc(var(--qq-v) + 6px),
    linear-gradient(160deg, #e9f6fb, #cde7f0);
  box-shadow: inset 0 0 12px rgba(0, 60, 90, 0.15);
}

.qq-piece {
  position: relative;
  border: 0;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  cursor: default;
  transition:
    transform 0.12s,
    background 0.12s;
}

.qq-piece .qq-gateau {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.qq-piece.vide {
  visibility: hidden;
}

.qq-piece.actif {
  cursor: pointer;
}

.qq-piece.actif:hover,
.qq-piece.actif:focus-visible {
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 0 0 3px var(--qq-tour, var(--qq-j1));
}

.qq-piece.danger::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 9px;
  border: 3px dashed #e0314f;
  pointer-events: none;
}

.qq-piece.choisie {
  animation: qq-choisie 0.5s ease-in-out;
}

@keyframes qq-choisie {
  50% {
    transform: translateY(-8px) scale(1.12);
    background: rgba(255, 255, 255, 0.9);
  }
}

/* ---------- Fenêtres ---------- */
.qq-voile {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(63, 32, 20, 0.45);
}

.qq-voile.transparent {
  background: transparent;
  pointer-events: none;
}

.qq-panneau {
  box-sizing: border-box;
  width: 470px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 20px 24px;
  border-radius: 16px;
  background: #fffaf6;
  color: #3d2216;
  border-top: 6px solid #d64054;
  box-shadow: 0 18px 50px rgba(63, 32, 20, 0.45);
  animation: qq-entree 0.22s ease-out;
}

@keyframes qq-entree {
  from {
    transform: translateY(12px) scale(0.97);
    opacity: 0;
  }
}

.qq-panneau h2 {
  margin: 0 0 14px;
  font-size: 1.35em;
  color: #6b3424;
}

.qq-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.qq-lib {
  width: 90px;
  font-weight: 600;
}

.qq-choix {
  display: inline-flex;
  flex-wrap: wrap;
  border-radius: 10px;
  background: #f1e2d8;
  padding: 3px;
  gap: 3px;
}

.qq-choix button {
  border: 0;
  padding: 7px 13px;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: #6b3424;
  cursor: pointer;
}

.qq-choix button:hover {
  background: rgba(255, 255, 255, 0.6);
}

.qq-choix button[aria-pressed="true"] {
  background: #6b3424;
  color: #fff;
  font-weight: 600;
}

.qq-case-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  line-height: 1.35;
  cursor: pointer;
}

.qq-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.qq-panneau-fin {
  width: 400px;
  text-align: center;
}

.qq-panneau-fin p {
  margin: 0;
  line-height: 1.45;
}

.qq-fin-image {
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 70px;
  margin-bottom: 6px;
}

.qq-fin-image .qq-gateau {
  width: 70px;
  height: 70px;
  animation: qq-saut 0.7s ease-in-out infinite alternate;
}

.qq-fin-image .qq-gateau:nth-child(2) {
  animation-delay: 0.12s;
}

.qq-fin-image .qq-gateau:nth-child(3) {
  animation-delay: 0.24s;
}

.qq-fin-image .qq-gateau:nth-child(4) {
  animation-delay: 0.36s;
}

/* ---------- Écran étroit : plateau puis vitrine dessous ---------- */
.qq-zone.etroit .qq-table {
  position: static;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
}

.qq-zone.etroit .qq-cote {
  width: var(--qq-s);
}

.qq-zone.etroit .qq-vitrine {
  grid-template-columns: repeat(8, var(--qq-v));
}

.qq-zone.etroit .qq-main-cadre {
  justify-content: center;
}

/* Interrupteurs du site aux couleurs du jeu (couleurs seulement : ni taille ni marge) */
.qq-jeu input[type="checkbox"] {
  background: #ead6cb;
  border-color: rgba(107, 52, 36, 0.18);
  box-shadow: inset 0 1px 2px rgba(74, 38, 24, 0.18);
}

.qq-jeu input[type="checkbox"]:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 2px rgba(74, 38, 24, 0.18),
    0 0 0 4px rgba(214, 64, 84, 0.15);
}

.qq-jeu input[type="checkbox"]:focus-visible {
  outline-color: #d64054;
}

.qq-jeu input[type="checkbox"]:checked {
  background: #d64054;
  border-color: #b8304a;
}

.qq-panneau b {
  color: #6b3424;
}

/* Boutons du site aux couleurs du jeu : chocolat (valider), framboise (secondaire), contour framboise (annuler) */
.qq-jeu .btn-vert {
  background: #6b3424;
  box-shadow: 0 10px 22px -12px rgba(107, 52, 36, 0.9);
}

.qq-jeu .btn-vert:hover {
  background: #8a4b2e;
  box-shadow: 0 14px 26px -12px rgba(107, 52, 36, 0.95);
}

.qq-jeu .btn-bleu {
  background: #d64054;
  box-shadow: 0 10px 22px -12px rgba(214, 64, 84, 0.9);
}

.qq-jeu .btn-bleu:hover {
  background: #bf3246;
  box-shadow: 0 14px 26px -12px rgba(214, 64, 84, 0.95);
}

.qq-jeu .btn-rouge {
  border-color: rgba(214, 64, 84, 0.45);
  color: #b8304a;
}

.qq-jeu .btn-rouge:hover {
  background: #fff0f2;
  border-color: #d64054;
  color: #9e2238;
}

/* écran étroit : gâteau à poser bien visible */
.qq-zone.etroit .qq-main {
  width: calc(var(--qq-s) * 0.24);
  height: calc(var(--qq-s) * 0.24);
}

.qq-jeu .btn-bleu:focus-visible,
.qq-jeu .btn-vert:focus-visible,
.qq-jeu .btn-rouge:focus-visible {
  outline-color: #d64054;
}