/* ===============================
   Paquet de cartes commun (Dame de pique, FreeCell, Spades, Spider)
   Contenu des cartes créé par js/cartes.js. Les tailles sont en cqw
   (1 cqw = 1 % de la largeur de la carte) : la carte s'adapte à toutes les tailles.
   =============================== */

.mg-carte {
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1;
  text-align: left;
  color: #1d1d1d;
  background: linear-gradient(160deg, #ffffff 30%, #f2eee4);
  border: 1px solid #aaa498;
  user-select: none;
  -webkit-user-select: none;
}

/* Les cartes jouables sont des <button> : le fond bleu du survol des boutons du site ne doit pas s'appliquer */
.mg-carte:hover {
  background: linear-gradient(160deg, #ffffff 30%, #f2eee4);
}

.mg-carte.mg-rouge {
  color: #c62828;
}

.mg-carte > span {
  position: absolute;
  pointer-events: none;
}

/* Le site colore les <b> : les cartes gardent leur propre couleur */
.mg-carte b,
.mg-carte i {
  color: inherit;
}

/* ---------- Index des coins ----------
   Valeur et couleur côte à côte en haut à gauche : restent visibles aussi bien
   dans une colonne (seul le haut des cartes dépasse) que dans une main en éventail
   (seule la partie gauche dépasse). */

.mg-coin {
  top: 1.5cqw;
  left: 4cqw;
  font-size: 25cqw;
  font-weight: bold;
  letter-spacing: -1.5cqw;
  white-space: nowrap;
}

.mg-coin i {
  font-style: normal;
  font-weight: normal;
  font-size: 0.95em;
  letter-spacing: 0;
  margin-left: 2cqw;
}

.mg-coin.mg-bas {
  top: auto;
  left: auto;
  bottom: 1.5cqw;
  right: 4cqw;
  transform: rotate(180deg);
}

/* ---------- Centre de la carte ---------- */

.mg-centre {
  top: 25%;
  bottom: 25%;
  left: 27cqw;
  right: 27cqw;
}

.mg-pip {
  position: absolute;
  font-size: 23cqw;
  transform: translate(-50%, -50%);
}

.mg-pip.mg-inv {
  transform: translate(-50%, -50%) rotate(180deg);
}

.mg-as {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 58cqw;
  transform: translate(-50%, -50%);
}

/* As de pique : un peu plus grand, comme sur les vrais jeux */
.mg-carte:not(.mg-rouge) .mg-as {
  font-size: 66cqw;
}

/* Figures : pièce d'échecs dans un cadre doré */
.mg-fig .mg-centre {
  top: 21%;
  bottom: 21%;
  left: 16cqw;
  right: 16cqw;
}

.mg-cadre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border: 1.2cqw solid #d4a93c;
  border-radius: 7cqw;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), transparent 70%),
    rgba(242, 193, 78, 0.22);
}

.mg-cadre b {
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif;
  font-weight: normal;
  font-size: 44cqw;
  line-height: 0.9;
}

.mg-cadre i {
  font-style: normal;
  font-size: 20cqw;
}

/* Symbole unique, affiché seulement sur les toutes petites cartes */
.mg-mini {
  display: none;
  left: 0;
  right: 0;
  bottom: 10cqw;
  text-align: center;
  font-size: 60cqw;
}

.mg-fig .mg-mini {
  font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", serif;
  font-size: 56cqw;
}

@container (max-width: 58px) {
  .mg-coin {
    font-size: 31cqw;
    left: 3cqw;
    top: 0.5cqw;
  }
  .mg-centre,
  .mg-bas {
    display: none;
  }
  .mg-mini {
    display: block;
  }
}

/* ---------- Dos ---------- */

.mg-carte.mg-dos {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cdefs%3E%3Cpattern id='l' width='7' height='7' patternUnits='userSpaceOnUse' patternTransform='rotate(45 50 70)'%3E%3Crect width='7' height='7' fill='%231f5fbf'/%3E%3Crect width='3.5' height='3.5' fill='%232b6cd0'/%3E%3Crect x='3.5' y='3.5' width='3.5' height='3.5' fill='%232b6cd0'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='140' fill='%23fff'/%3E%3Crect x='5' y='5' width='90' height='130' rx='5' fill='url(%23l)'/%3E%3Crect x='9' y='9' width='82' height='122' rx='3' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='70' r='22' fill='%23fff' stroke='%23174a96' stroke-width='2'/%3E%3Ccircle cx='50' cy='70' r='18.5' fill='none' stroke='%231f5fbf' stroke-width='.8'/%3E%3Cg fill='%231d1d1d' transform='translate(44.5 55) scale(0.11)'%3E%3Cpath d='M50 4C38 24 8 38 8 60c0 14 11 22 23 22 7 0 12-3 15-7-1 10-5 17-13 22h34c-8-5-12-12-13-22 3 4 8 7 15 7 12 0 23-8 23-22C92 38 62 24 50 4z'/%3E%3C/g%3E%3Cg fill='%23c62828' transform='translate(54.5 65) scale(0.11)'%3E%3Cpath d='M50 94C30 75 5 59 5 33 5 18 16 7 30 7c9 0 16 5 20 13 4-8 11-13 20-13 14 0 25 11 25 26 0 26-25 42-45 61z'/%3E%3C/g%3E%3Cg fill='%231d1d1d' transform='translate(44.5 74.5) scale(0.11)'%3E%3Ccircle cx='50' cy='27' r='19'/%3E%3Ccircle cx='27' cy='58' r='19'/%3E%3Ccircle cx='73' cy='58' r='19'/%3E%3Cpath d='M46 40h8l3 36c1 8 6 14 12 19H31c6-5 11-11 12-19z'/%3E%3C/g%3E%3Cg fill='%23c62828' transform='translate(34.5 65) scale(0.11)'%3E%3Cpath d='M50 3L87 50 50 97 13 50z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, #1f5fbf;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.mg-carte.mg-dos-araignee {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'%3E%3Cdefs%3E%3CradialGradient id='f' cx='.5' cy='.36' r='.8'%3E%3Cstop offset='0' stop-color='%238e2a37'/%3E%3Cstop offset='1' stop-color='%233e0d15'/%3E%3C/radialGradient%3E%3CclipPath id='c'%3E%3Crect x='5' y='5' width='90' height='130' rx='5'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='100' height='140' fill='%23fff'/%3E%3Crect x='5' y='5' width='90' height='130' rx='5' fill='url(%23f)'/%3E%3Cpath clip-path='url(%23c)' d='M50 50L56.3 5M50 50L93.5 5M50 50L95 42.1M50 50L95 71.9M50 50L95 134.6M50 50L38.1 135M50 50L5 96.6M50 50L5 57.9M50 50L5 28.1M50 50L26.1 5M50.7 45Q51.8 46.4 53.5 46.4M53.5 46.4Q53.5 48.1 54.9 49.1M54.9 49.1Q54 50.6 54.5 52.2M54.5 52.2Q52.9 52.8 52.3 54.4M52.3 54.4Q50.7 53.9 49.3 55M49.3 55Q48.2 53.6 46.5 53.6M46.5 53.6Q46.5 51.9 45.1 50.9M45.1 50.9Q46 49.4 45.5 47.8M45.5 47.8Q47.1 47.2 47.7 45.6M47.7 45.6Q49.3 46.1 50.7 45M51.3 40.5Q53.4 43.1 56.7 43.1M56.7 43.1Q56.8 46.4 59.5 48.3M59.5 48.3Q57.6 51.1 58.6 54.2M58.6 54.2Q55.5 55.3 54.5 58.5M54.5 58.5Q51.3 57.6 48.7 59.5M48.7 59.5Q46.6 56.9 43.3 56.9M43.3 56.9Q43.2 53.6 40.5 51.7M40.5 51.7Q42.4 48.9 41.4 45.8M41.4 45.8Q44.5 44.7 45.5 41.5M45.5 41.5Q48.7 42.4 51.3 40.5M52.2 34.5Q55.5 38.7 60.9 38.7M60.9 38.7Q61.1 44.1 65.4 47.3M65.4 47.3Q62.4 51.7 64.1 56.9M64.1 56.9Q59 58.7 57.4 63.8M57.4 63.8Q52.2 62.3 47.8 65.5M47.8 65.5Q44.5 61.3 39.1 61.3M39.1 61.3Q38.9 55.9 34.6 52.7M34.6 52.7Q37.6 48.3 35.9 43.1M35.9 43.1Q41 41.3 42.6 36.2M42.6 36.2Q47.8 37.7 52.2 34.5M53.3 26.5Q58.3 33 66.5 33M66.5 33Q66.7 41.1 73.3 45.9M73.3 45.9Q68.8 52.6 71.3 60.4M71.3 60.4Q63.6 63.2 61.1 70.9M61.1 70.9Q53.3 68.7 46.7 73.5M46.7 73.5Q41.7 67 33.5 67M33.5 67Q33.3 58.9 26.7 54.1M26.7 54.1Q31.2 47.4 28.7 39.6M28.7 39.6Q36.4 36.8 38.9 29.1M38.9 29.1Q46.7 31.3 53.3 26.5M54.8 16.1Q62 25.4 73.8 25.4M73.8 25.4Q74.2 37.1 83.7 44M83.7 44Q77.1 53.8 80.8 65M80.8 65Q69.7 69 66.1 80.3M66.1 80.3Q54.8 77 45.2 83.9M45.2 83.9Q38 74.6 26.2 74.6M26.2 74.6Q25.8 62.9 16.3 56M16.3 56Q22.9 46.2 19.2 35M19.2 35Q30.3 31 33.9 19.7M33.9 19.7Q45.2 23 54.8 16.1M56.7 2.2Q66.9 15.3 83.5 15.3M83.5 15.3Q84.1 31.9 97.5 41.6M97.5 41.6Q88.2 55.4 93.4 71.1M93.4 71.1Q77.8 76.8 72.6 92.6M72.6 92.6Q56.7 88 43.3 97.8M43.3 97.8Q33.1 84.7 16.5 84.7M16.5 84.7Q15.9 68.1 2.5 58.4M2.5 58.4Q11.8 44.6 6.6 28.9M6.6 28.9Q22.2 23.2 27.4 7.4M27.4 7.4Q43.3 12 56.7 2.2M59.3 -16Q73.4 2.1 96.3 2M96.3 2Q97.1 25 115.7 38.4M115.7 38.4Q102.8 57.4 109.9 79.2M109.9 79.2Q88.4 87 81.3 108.9M81.3 108.9Q59.3 102.5 40.7 116M40.7 116Q26.6 97.9 3.7 98M3.7 98Q2.9 75 -15.7 61.6M-15.7 61.6Q-2.8 42.6 -9.9 20.8M-9.9 20.8Q11.6 13 18.7 -8.9M18.7 -8.9Q40.7 -2.5 59.3 -16M62.7 -40.1Q81.9 -15.4 113.2 -15.5M113.2 -15.5Q114.3 15.8 139.6 34.2M139.6 34.2Q122.1 60.1 131.8 89.9M131.8 89.9Q102.4 100.6 92.7 130.3M92.7 130.3Q62.6 121.7 37.3 140.1M37.3 140.1Q18.1 115.4 -13.2 115.5M-13.2 115.5Q-14.3 84.2 -39.6 65.8M-39.6 65.8Q-22.1 39.9 -31.8 10.1M-31.8 10.1Q-2.4 -0.6 7.3 -30.3M7.3 -30.3Q37.4 -21.7 62.7 -40.1' fill='none' stroke='%23f6dfe2' stroke-opacity='.5' stroke-width='.7'/%3E%3Cpath d='M50 50V96' stroke='%23f6dfe2' stroke-opacity='.75' stroke-width='.6'/%3E%3Cpath d='M47 99L38 92L33 100M47 101.2L36 98L30 106M47 103.4L36 105L31 114M47 105.6L39 110L36 121M53 99L62 92L67 100M53 101.2L64 98L70 106M53 103.4L64 105L69 114M53 105.6L61 110L64 121' fill='none' stroke='%23120709' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M47 99L38 92L33 100M47 101.2L36 98L30 106M47 103.4L36 105L31 114M47 105.6L39 110L36 121M53 99L62 92L67 100M53 101.2L64 98L70 106M53 103.4L64 105L69 114M53 105.6L61 110L64 121' fill='none' stroke='%23f6dfe2' stroke-opacity='.25' stroke-width='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='50' cy='111' rx='7' ry='9' fill='%23120709' stroke='%23f6dfe2' stroke-opacity='.35' stroke-width='.5'/%3E%3Cpath d='M47.5 107h5l-2 4 2 4h-5l2-4z' fill='%23d32f2f'/%3E%3Ccircle cx='50' cy='101' r='4.5' fill='%23120709' stroke='%23f6dfe2' stroke-opacity='.35' stroke-width='.5'/%3E%3Ccircle cx='48.4' cy='99.8' r='.8' fill='%23ff5a5a'/%3E%3Ccircle cx='51.6' cy='99.8' r='.8' fill='%23ff5a5a'/%3E%3Crect x='9' y='9' width='82' height='122' rx='3' fill='none' stroke='%23f6dfe2' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #5c1520;
}