/* Le panneau de victoire (maquette de Frederic du 15/09). Il se range a
   droite de la photo de victoire. Tout y est mesure en hauteur du panneau
   (cqh) : il garde ses proportions de l'ordinateur au telephone couche. Le
   cadre bleu lumineux et, en francais, les lettrages sont les elements
   livres par Frederic ; le nom, le score et l'arene sont ecrits. */

#result.screen {
  display: block;
  padding: 0;
}
#result .res-panneau.screen-inner.narrow {
  position: absolute;
  /* Les mesures de la maquette : 44 % de la largeur de l'ecran, colle au
     bord droit, 7 % au-dessus du bas. */
  right: 1.6vw;
  bottom: 6.8vh;
  width: min(96vh, 44vw);
  aspect-ratio: 1100 / 572;
  height: auto;
  margin: 0;
  padding: 0 4cqh 0 7cqh;
  box-sizing: border-box;
  container-type: size;
  display: grid;
  grid-template-columns: 1fr 44%;
  grid-template-rows: 1fr;
  column-gap: 4cqh;
  align-items: center;
  border-radius: 0;
  background: url('../assets/ui/resultat/cadre.webp') center / 100% 100% no-repeat;
  text-align: center;
  animation: res-entree 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
#result.avec-photo .res-panneau.screen-inner.narrow {
  padding: 0 4cqh 0 7cqh;
  background: url('../assets/ui/resultat/cadre.webp') center / 100% 100% no-repeat;
  grid-template-columns: 1fr 44%;
}
@keyframes res-entree { from { transform: translateY(8vh) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }

#result .res-panneau {
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  --marine: #0f2360;
}

/* L'arene en badge jaune, a cheval sur le bord haut du cadre. */
#result .res-badge.kicker {
  position: absolute;
  top: -6cqh;
  left: calc(7cqh + (100% - 7cqh - 4cqh - 44% - 4cqh) / 2);
  transform: translateX(-50%);
  margin: 0;
  padding: 1.6cqh 6cqh;
  border-radius: 99cqh;
  background: linear-gradient(180deg, #ffe766 0%, #ffc21a 60%, #f5a300 100%);
  box-shadow: 0 0 0 0.8cqh #0f2360, 0 1.4cqh 0 #0a1a4a;
  color: var(--marine);
  font-family: var(--lettrage);
  font-size: 7.5cqh;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.res-colonne {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3cqh;
}

/* VICTOIRE ! en lettres jaunes cernees de marine, entre deux etoiles. */
#result .res-titre {
  position: relative;
  margin: 0;
  padding: 0 11cqh;
  transform: rotate(-3deg);
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: 17cqh;
  line-height: 1;
  text-transform: uppercase;
  color: #ffd83a;
  background: linear-gradient(180deg, #fff38a 0%, #ffd23a 50%, #ff9f0a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.1cqh var(--marine);
  paint-order: stroke fill;
  filter: drop-shadow(0 1cqh 0 #0a1a4a);
  white-space: nowrap;
}
#result .res-titre::before,
#result .res-titre::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9cqh; height: 9cqh;
  transform: translateY(-50%) rotate(-12deg);
  background: #ffd23a;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#result .res-titre::before { left: 0; }
#result .res-titre::after { right: 0; transform: translateY(-50%) rotate(14deg); }

/* Le vainqueur : son drapeau, son nom. */
.res-joueur {
  display: flex;
  align-items: center;
  gap: 3cqh;
  margin: 2cqh 0 0;
}
.res-drapeau {
  flex: none;
  display: block;
  width: 13cqh; height: 8.7cqh;
  border: 0.8cqh solid #fff;
  border-radius: 1.8cqh;
  overflow: hidden;
  background: #fff;
}
.res-drapeau svg { display: block; width: 100%; height: 100%; }
.res-nom {
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: 12cqh;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 1cqh var(--marine);
  paint-order: stroke fill;
  text-shadow: 0 0.9cqh 0 #0a1a4a;
  white-space: nowrap;
}

/* Ce que compte le score : les sets, ou le set unique. */
.res-etiquette {
  margin: 1.5cqh 0 -0.5cqh;
  color: #9fd0ff;
  font-family: var(--lettrage);
  font-size: 4.6cqh;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#result .res-score.final-score {
  margin: 0;
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: 16cqh;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1.1cqh var(--marine);
  paint-order: stroke fill;
  text-shadow: 0 1cqh 0 #0a1a4a;
}

.res-exclamation {
  margin: 1.5cqh 0 0;
  padding: 1.2cqh 5cqh;
  border-radius: 99cqh;
  background: linear-gradient(180deg, #ffe766 0%, #ffc21a 60%, #f5a300 100%);
  box-shadow: 0 0 0 0.6cqh var(--marine), 0 1cqh 0 #0a1a4a;
  color: var(--marine);
  font-family: var(--lettrage);
  font-size: 6.5cqh;
  line-height: 1;
  text-transform: uppercase;
}

/* Ce que le match vient de rapporter (25/09) : on le voit tomber sous
   l'exclamation, dans l'or des pions. Cache quand il ne rapporte rien —
   defaite, ou match de tournoi deja paye par son tableau. */
.res-gain {
  margin: 1.1cqh 0 0;
  color: #ffd75e;
  font-family: var(--lettrage);
  font-size: 4.4cqh;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0.5cqh 0 #0a1a4a;
}
.res-gain[hidden] { display: none; }

/* En plusieurs sets, le score de chacun, vu du vainqueur. */
.res-manches {
  display: flex;
  gap: 1.6cqh;
  margin: 0.5cqh 0 0.5cqh;
}
.res-manche {
  padding: 0.8cqh 2.2cqh;
  border-radius: 99cqh;
  background: rgba(6, 16, 52, 0.7);
  box-shadow: inset 0 0 0 0.35cqh rgba(120, 175, 255, 0.5);
  color: #cfe3ff;
  font-family: var(--lettrage);
  font-size: 5.2cqh;
  line-height: 1;
  white-space: nowrap;
}
.res-manche.gagnee { color: #ffd23a; box-shadow: inset 0 0 0 0.35cqh rgba(255, 210, 58, 0.7); }

#result .res-detail.subtitle {
  margin: 2.5cqh 0 0;
  padding: 1.6cqh 5cqh;
  border-radius: 99cqh;
  background: rgba(6, 16, 52, 0.75);
  box-shadow: inset 0 0 0 0.4cqh rgba(120, 175, 255, 0.55);
  color: #fff;
  font-family: var(--lettrage);
  font-size: 5.6cqh;
  line-height: 1.1;
  white-space: nowrap;
}
.res-detail b { color: #ffd23a; font-weight: 400; }

/* Les boutons, a droite : jaune pour rejouer, bleu pour le menu. */
#result .res-actions.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5cqh;
  margin: 0;
  padding-top: 4cqh;
}
#result .res-bouton.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  width: 100%;
  min-height: 0;
  height: 17cqh;
  margin: 0;
  padding: 0 4cqh;
  border: 0;
  border-radius: 99cqh;
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: 6.8cqh;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
#result .res-bouton.btn:hover { transform: translateY(-0.6cqh); filter: brightness(1.06); }
#result .res-bouton.btn:active { transform: translateY(0.8cqh); }
#result .res-jaune.btn {
  background: linear-gradient(180deg, #ffe97a 0%, #ffc61f 55%, #f39c00 100%);
  box-shadow: inset 0 -1.4cqh 0 rgba(160, 80, 0, 0.35), inset 0 1cqh 0 rgba(255, 255, 255, 0.45), 0 1.4cqh 0 #0a1a4a;
  color: var(--marine);
}
#result .res-bleu.btn {
  background: linear-gradient(180deg, #6fd3ff 0%, #2b9bff 50%, #1466e0 100%);
  box-shadow: inset 0 -1.4cqh 0 rgba(0, 40, 120, 0.35), inset 0 1cqh 0 rgba(255, 255, 255, 0.4), 0 1.4cqh 0 #0a1a4a;
  color: #fff;
  -webkit-text-stroke: 0.7cqh var(--marine);
  paint-order: stroke fill;
}
.res-icone {
  flex: none;
  width: 8.5cqh; height: 8.5cqh;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.res-bleu .res-icone { stroke: #fff; filter: drop-shadow(0 0 0.5cqh var(--marine)); }

/* Les elements dessines de la maquette (Frederic, 15/09) : VICTOIRE !, QUEL
   MATCH !, REJOUER et MENU PRINCIPAL sont ses images. Le texte reste dans la
   page pour les lecteurs d'ecran. Ils etaient reserves au francais, et en
   anglais (la langue d'ouverture du jeu) le panneau disait « Winner! » sans
   logo ; Frederic, 15/09 au soir : les lettrages dessines dans TOUTES les
   langues en attendant ses lettrages anglais. */
#result .res-titre {
  width: 88cqh;
  aspect-ratio: 900 / 165;
  padding: 0;
  transform: rotate(-2deg);
  background: url('../assets/ui/resultat/victoire.webp') center / 100% 100% no-repeat;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-stroke: 0;
  font-size: 0;
  filter: none;
}
#result .res-titre::before,
#result .res-titre::after { display: none; }

#result .res-exclamation {
  width: 60cqh;
  aspect-ratio: 900 / 178;
  padding: 0;
  border-radius: 0;
  background: url('../assets/ui/resultat/quel-match.webp') center / 100% 100% no-repeat;
  box-shadow: none;
  font-size: 0;
}

#result #btn-again.res-bouton,
#result #btn-result-menu.res-bouton {
  height: auto;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-text-stroke: 0;
  font-size: 0;
}
#result #btn-again.res-bouton > *,
#result #btn-result-menu.res-bouton > * { display: none; }
#result #btn-again.res-bouton {
  aspect-ratio: 900 / 228;
  background: url('../assets/ui/resultat/rejouer.webp') center / 100% 100% no-repeat;
}
#result #btn-result-menu.res-bouton {
  aspect-ratio: 900 / 208;
  background: url('../assets/ui/resultat/menu-principal.webp') center / 100% 100% no-repeat;
}