/* Import de la police Play (gras) */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');

/* Reset et base */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  background: #eef;
  text-align: center;
}

/* Titre */
h2 {
  font-size: 1.2rem;
  margin: 0.5em 0;
}

/* Terrain de jeu */
#Terrain {
  position: relative;
  width: 920px;
  height: 568px;
  margin: 1em auto;
  border: 3px solid #333;
  background: #fff;
  overflow: hidden;
}

/* Scoreboard overlay */
#scoreboardOverlay {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 30;
  font-size: 1rem;
}

#scoreboardOverlayDroite {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 30;
}

#scoreboardOverlayGauche {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,0.8);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 30;
  font-family: 'Play', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.controlsBarOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);  /* fond semi-transparent */
  color: white;
  z-index: 20;                     /* au-dessus des éléments du Terrain */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 0.9rem;
}

/* Sprites (carrés) */
#carreBleu,
#carreOrange {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 10;
}
#carreBleu { background: #339af0; }
#carreOrange { background: orange; }

/* Perles */
.perle {
  width: 10px;
  height: 10px;
  background: white;
  border: 2px solid black;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
}

/* Conteneurs de perles capturées */
#capturesBleu,
#capturesOrange {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
}

/* Zone de dépôt */
#depot {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd;
  border: 2px dashed #aaa;
  padding: 6px 14px;
  font-weight: bold;
  border-radius: 12px;
  z-index: 10;
}

/* --- Fond animé “sable sous l’eau” --- */
#Terrain {
  background-color: #e0c080;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(224,192,128,0.2) 0px,
      rgba(224,192,128,0.2) 4px,
      transparent 24px,
      transparent 64px
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255,255,255,0.15),
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      rgba(173,216,230,0.6),
      rgba(25,25,112,0.5)
    );
  background-size:
    150px 150px,
    100% 100%,
    cover;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat;
  animation:
    sandDeposit 12s linear infinite,
    lightRipple 8s ease-in-out infinite;
}

@keyframes sandDeposit {
  from   { background-position: 0 0, center, 0 0; }
  to     { background-position: 150px 150px, center, 0 0; }
}

@keyframes lightRipple {
  0%   { background-size: 200% 200%;  background-position: center; }
  50%  { background-size: 220% 220%;  background-position: 10% 10%; }
  100% { background-size: 200% 200%;  background-position: center; }
}

#message {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  top: 40%;
  display: none;
  z-index: 40;
}