/* But et fin de match. */

/* ------------------------------------------------------------ but ----- */

/* Un bandeau en biais traverse l'ecran a la couleur de l'equipe qui marque,
   « BUT ! » en grand par-dessus, le buteur dessous. */
#but {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: clamp(120px, 22vh, 220px);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  --c: var(--violet);
  --c2: #b388ff;
}
#but[hidden] { display: none; }
#but.orange { --c: var(--orange); --c2: #ffab4d; }
#but .but-bande {
  position: absolute;
  inset: 0 -10%;
  transform: skewY(-4deg);
  background: var(--c);
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  box-shadow: 0 0 60px var(--c);
  opacity: .92;
}
/* Deux filets clairs, en haut et en bas de la bande. */
#but .but-bande::before,
#but .but-bande::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c2);
  box-shadow: 0 0 14px var(--c2);
}
#but .but-bande::before { top: 8%; }
#but .but-bande::after { bottom: 8%; }
#but .but-texte { position: relative; display: grid; justify-items: center; gap: .2em; transform: skewY(-4deg); }
#but strong {
  font: italic 800 clamp(56px, 10vw, 150px)/.9 'Exo 2', var(--display);
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 6px 0 #0006, 0 0 40px #fff8;
}
#but #but-nom {
  font: 700 clamp(14px, 1.6vw, 26px)/1 var(--mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px #0009;
}
#but #but-nom:empty { display: none; }
/* Entree : la bande s'etire depuis le centre, le texte claque. */
#but.entre .but-bande { animation: bande .45s cubic-bezier(.2, .9, .2, 1) both; }
#but.entre .but-texte { animation: claque .5s .08s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes bande { from { transform: skewY(-4deg) scaleX(0); } to { transform: skewY(-4deg) scaleX(1); } }
@keyframes claque { from { transform: skewY(-4deg) scale(1.8); opacity: 0; } to { transform: skewY(-4deg) scale(1); opacity: 1; } }

/* ---------------------------------------------------- fin de match ---- */

/* L'ecran du gagnant, par-dessus la partie : l'issue, le nom en grand a la
   couleur de l'equipe, le score, puis rejouer ou quitter. */
#screen-result.fin {
  display: grid;
  place-items: center;
  background: radial-gradient(90% 70% at 50% 45%, #0d0a1ad9, #04060af2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#screen-result.fin[hidden] { display: none; }
.fin-carte {
  --c: #c9c1dd;
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 14px);
  width: min(760px, 92vw);
  padding: clamp(24px, 5vh, 48px) clamp(18px, 4vw, 56px);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 18px;
  background: linear-gradient(160deg, #161029f5, #080b14f8 60%);
  box-shadow: 0 30px 100px #000d, 0 0 80px color-mix(in srgb, var(--c) 25%, transparent);
  text-align: center;
  animation: fin-entre .5s cubic-bezier(.2, 1.2, .3, 1) both;
}
.fin-carte::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 18px 18px 0 0; background: var(--c); }
.fin-carte.violet { --c: var(--violet); }
.fin-carte.orange { --c: var(--orange); }
@keyframes fin-entre { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fin-issue { margin: 0; font: 700 clamp(11px, 1vw, 15px)/1 var(--mono); letter-spacing: .4em; text-transform: uppercase; color: var(--c); }
#result-title {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font: italic 800 clamp(40px, 6.4vw, 96px)/1 'Exo 2', var(--display);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 34px var(--c), 0 4px 0 #0007;
}
.fin-sous { margin: 0; font: 400 clamp(11px, 1vw, 14px)/1.4 var(--mono); letter-spacing: .14em; color: #c9c1dd; }
.fin-score { display: flex; align-items: center; gap: .4em; margin: 4px 0 8px; font: italic 800 clamp(30px, 3.6vw, 56px)/1 'Exo 2', var(--display); }
.fin-score .violet { color: var(--violet); text-shadow: 0 0 18px #8b5cf6aa; }
.fin-score .orange { color: var(--orange); text-shadow: 0 0 18px #f07a25aa; }
.fin-score .tiret { color: #ffffff55; }
/* Le petit menu : rejouer, quitter. */
#screen-result .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
#screen-result .actions button {
  min-width: 170px;
  padding: 12px 24px;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  background: #0b0f18;
  color: #fff;
  font: italic 800 clamp(14px, 1.2vw, 18px)/1 'Exo 2', var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  clip-path: none;
}
#screen-result .actions button.primary {
  border: 0;
  background: linear-gradient(#ff8f3f, var(--orange) 55%, #d85d0e);
  box-shadow: 0 10px 30px #f07a2544;
}
#screen-result .actions button:hover,
#screen-result .actions button.pad-focus { outline: none; border-color: #fff9; filter: brightness(1.12); box-shadow: 0 0 0 2px #fff6; }

@media (max-height: 520px) and (orientation: landscape) {
  .fin-carte { padding: 16px 20px; gap: 6px; }
  #result-title { font-size: 38px; }
  #screen-result .actions button { min-width: 130px; padding: 9px 16px; }
}