/* Le standard des panneaux de jeu (Frederic, 15/09 : « Options, menu et
   Pause suivant le nouveau standard ») : celui du panneau de victoire
   (css/resultat.css). Un cadre bleu au liseré cyan lumineux, le titre en
   lettres jaunes cernees de marine, des boutons ronds jaune (l'action
   principale) et bleus, des pastilles de choix. Le cadre est dessine en
   CSS et non tire de l'image du panneau de victoire : etiree a d'autres
   proportions, l'image deformait ses coins arrondis.
   Tout se mesure en --u, un centieme de la hauteur d'ecran, borne par la
   largeur pour qu'un ecran etroit garde ses marges. */

.pp-panneau {
  --u: min(1vh, 0.62vw);
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
  --marine: #0f2360;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 4.5);
  border: calc(var(--u) * 0.7) solid #2fdcff;
  border-radius: calc(var(--u) * 5);
  background: radial-gradient(ellipse 70% 60% at 50% 32%, #0b64f2 0%, #0a44c6 48%, #072b8e 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 0.7) #0b34a8,
    0 0 calc(var(--u) * 3) calc(var(--u) * 0.8) rgba(40, 200, 255, 0.5),
    inset 0 0 calc(var(--u) * 1.8) rgba(60, 220, 255, 0.55),
    inset 0 0 calc(var(--u) * 7) rgba(0, 12, 70, 0.5);
  color: #fff;
  text-align: center;
  animation: pp-entree 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes pp-entree { from { transform: translateY(6vh) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* Le titre : lettres jaunes cernees de marine, comme VICTOIRE !. */
.pp-titre {
  margin: 0 0 calc(var(--u) * 3.5);
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: calc(var(--u) * 9);
  line-height: 1;
  letter-spacing: 0.02em;
  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: calc(var(--u) * 0.6) var(--marine);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 #0a1a4a);
}

/* Les boutons : jaune pour l'action principale, bleus pour les autres. */
.pp-boutons {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.6);
}
.pp-boutons.pp-rangee { flex-direction: row; justify-content: center; }
.pp-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.8);
  min-width: 0;
  height: calc(var(--u) * 10);
  margin: 0;
  padding: 0 calc(var(--u) * 4);
  border: 0;
  border-radius: 99vh;
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: calc(var(--u) * 4.4);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.pp-bouton:hover { transform: translateY(calc(var(--u) * -0.4)); filter: brightness(1.06); }
.pp-bouton:active { transform: translateY(calc(var(--u) * 0.5)); }
.pp-bouton:focus-visible { outline: calc(var(--u) * 0.5) solid #fff; outline-offset: calc(var(--u) * 0.5); }
.pp-jaune {
  background: linear-gradient(180deg, #ffe97a 0%, #ffc61f 55%, #f39c00 100%);
  box-shadow: inset 0 calc(var(--u) * -0.9) 0 rgba(160, 80, 0, 0.35), inset 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.45), 0 calc(var(--u) * 0.9) 0 #0a1a4a;
  color: var(--marine);
}
.pp-bleu {
  background: linear-gradient(180deg, #6fd3ff 0%, #2b9bff 50%, #1466e0 100%);
  box-shadow: inset 0 calc(var(--u) * -0.9) 0 rgba(0, 40, 120, 0.35), inset 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.4), 0 calc(var(--u) * 0.9) 0 #0a1a4a;
  color: #fff;
  -webkit-text-stroke: calc(var(--u) * 0.45) var(--marine);
  paint-order: stroke fill;
}
.pp-icone {
  flex: none;
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 5.4);
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-bleu .pp-icone { filter: drop-shadow(0 0 calc(var(--u) * 0.3) var(--marine)); }
/* Le bouton Son de la pause : haut-parleur actif, ou barre si coupe. */
#btn-son .son-off { display: none; }
#btn-son.son-coupe .son-on { display: none; }
#btn-son.son-coupe .son-off { display: inline-block; }

/* Une ligne de reglage : l'etiquette marine a gauche, les choix a droite. */
.pp-reglage {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  margin: 0 0 calc(var(--u) * 2);
}
.pp-etiquette {
  margin: 0;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2.4);
  border-radius: 99vh;
  background: rgba(6, 16, 52, 0.72);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.3) rgba(120, 175, 255, 0.5);
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: calc(var(--u) * 3.6);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fd0ff;
  text-align: left;
  white-space: nowrap;
}
/* Dans les reglages, une meme largeur d'etiquette, celle de « Manches
   gagnantes » : les choix s'alignent sur une colonne. */
.reglages-panneau .pp-reglage { grid-template-columns: calc(var(--u) * 45) 1fr; }
.pp-choix { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); }
.pp-choix .pill {
  min-height: 0;
  height: calc(var(--u) * 7.6);
  padding: 0 calc(var(--u) * 3.2);
  border: 0;
  border-radius: 99vh;
  background: linear-gradient(180deg, #123a9e 0%, #0b2670 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.35) rgba(120, 190, 255, 0.55), 0 calc(var(--u) * 0.6) 0 #061342;
  color: #dbeaff;
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: calc(var(--u) * 3.8);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pp-choix .pill:hover { filter: brightness(1.12); border: 0; }
.pp-choix .pill[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffe97a 0%, #ffc61f 55%, #f39c00 100%);
  box-shadow: inset 0 calc(var(--u) * -0.7) 0 rgba(160, 80, 0, 0.35), inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.45), 0 calc(var(--u) * 0.6) 0 #0a1a4a;
  color: var(--marine);
  font-weight: 400;
}

.pp-note {
  margin: calc(var(--u) * 2.4) 0 0;
  font-family: var(--lettrage);
  font-size: calc(var(--u) * 3);
  color: #9fd0ff;
}
.pp-note:empty { display: none; }

/* ---- Pause ---- */
#pause.screen { padding: 0; }
#pause .pause-panneau { width: calc(var(--u) * 78); }

/* ---- Reglages ----
   Le tiroir couvre le choix des combattants d'un voile bleu nuit ; le
   panneau s'y centre. */
#menu .settings-drawer {
  padding: calc(min(1vh, 0.62vw) * 3);
  background: rgba(3, 10, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reglages-panneau {
  width: min(calc(var(--u) * 150), 96vw);
  padding-top: calc(var(--u) * 3.5);
  padding-bottom: calc(var(--u) * 3.5);
}
.reglages-panneau .pp-titre { margin-bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 8); }
.reglages-panneau .pp-boutons { margin-top: calc(var(--u) * 3); gap: calc(var(--u) * 2.2); }
.reglages-panneau .pp-bouton { height: calc(var(--u) * 9); font-size: calc(var(--u) * 3.9); padding: 0 calc(var(--u) * 3.2); }