@import url('https://fonts.googleapis.com/css2?family=New+Amsterdam&display=swap');

body, html {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background-color: #000;
  font-family: 'New Amsterdam', sans-serif;
  overflow: hidden;
}

/* --- MODO MULTI (Ranking de 3) --- */
#app-viewport.modo-multi {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; justify-content: center; align-items: center;
}

.modo-multi .hearts-layer {
  position: absolute; inset: 0;
  background-image: url('https://i.postimg.cc/GpbzK0H4/corac_o_es_fundo.png');
  background-size: cover; opacity: 0.3; z-index: 1;
}

.modo-multi #leaderboard {
  position: relative; z-index: 10; width: 90%; max-width: 500px;
  display: flex; flex-direction: column; gap: 20px;
}

.modo-multi .bar-container {
  position: relative; width: 100%; aspect-ratio: 320 / 58;
  background-image: url('https://i.postimg.cc/ncgqryvP/Sem-nome-(A4)-(1).png');
  background-size: 100% 100%;
  -webkit-mask-image: url('https://i.postimg.cc/ncgqryvP/Sem-nome-(A4)-(1).png');
  mask-image: url('https://i.postimg.cc/ncgqryvP/Sem-nome-(A4)-(1).png');
  mask-size: 100% 100%;
  container-type: size;
}

.modo-multi .gold-fill {
  height: 100%; background-image: url('https://i.postimg.cc/QMjSmLHs/barra_dourada.png');
  background-size: cover; transition: width 2s ease-out;
  display: flex; align-items: center; padding-left: 6%; box-sizing: border-box;
}

/* Números grandes que escalam no modo multi */
.modo-multi .points-text-multi {
  color: black; font-weight: bold;
  font-size: 55cqh; 
  line-height: 1;
}

/* --- MODO SOLO (Caneira Rosa) --- */
#app-viewport.modo-solo {
  position: relative;
  width: 100vw; height: 177.78vw; 
  max-height: 100vh; max-width: 56.25vh;
  background-image: url('https://i.postimg.cc/qRcSSp0W/caneira.png');
  background-size: 100% 100%;
  margin: auto;
  container-type: size;
}

.modo-solo .hearts-layer { display: none; }

.modo-solo #leaderboard {
  position: absolute; top: 18.5%; left: 50%;
  transform: translateX(-50%); width: 68%; aspect-ratio: 320 / 75;
}

.modo-solo .solo-mask {
  position: absolute; inset: 0;
  -webkit-mask-image: url('https://i.postimg.cc/LXkwwm2H/barra-cinzenta.png');
  mask-image: url('https://i.postimg.cc/LXkwwm2H/barra-cinzenta.png');
  mask-size: 100% 100%;
}

.modo-solo .bar-bg {
  position: absolute; inset: 0;
  background-image: url('https://i.postimg.cc/LXkwwm2H/barra-cinzenta.png');
  background-size: 100% 100%;
}

.modo-solo .fill-container {
  position: absolute; inset: 0; z-index: 2; width: 0%;
  transition: width 2s cubic-bezier(0.1, 0.5, 0.5, 1); overflow: hidden;
}

.modo-solo .fill-image {
  position: absolute; top: -15%; left: -5%; width: 110%; height: 130%;
  background-image: url('https://i.postimg.cc/LsDjbWGK/barra-rosa.png');
  background-size: 100% 100%;
}

/* Números controlados para a barra rosa */
.modo-solo .points-text-solo {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  color: black; 
  font-size: clamp(20px, 45cqh, 40px); /* Ajuste fino para não vazar */
  font-weight: bold; z-index: 10;
}