/* ==============================
   LOS PREMIOS EXTRA, EN LA WEB — css/premios.css
   ==============================
   La marca «x2» junto al saldo mientras dura un evento, con su texto al
   tocarla, y la línea de la página de jugar (js/premios.js,
   specs/012-premios-por-jugar). La barra de arriba es oscura en los dos
   temas: colores fijos, como los del saldo (css/navbar-macrojuegos.css). */

.nav-monedas-wrap {
  position: relative;
}

.nav-premio {
  display: inline-flex !important;
  align-items: center;
  background: #2b1d05 !important;
  border: 1px solid #f0b429 !important;
  color: #ffd83d !important;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  padding: 7px 9px;
  border-radius: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.nav-premio:hover {
  box-shadow: 0 0 14px rgba(240, 180, 41, .35) !important;
}

.nav-premio:focus-visible {
  outline: 2px solid #ffd83d;
  outline-offset: 2px;
}

.nav-premio-globo {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 210;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid #6528c7 !important;
  background: #120c2b !important;
  color: #f1f5f9 !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

.nav-premio-globo[hidden] {
  display: none !important;
}

/* En el móvil la barra no enseña el saldo: lo del evento va como primera
   línea del «Menú», entera y con los colores de la marca. */
.navbar .nav-mobile-menu .nav-mobile-premio {
  margin-bottom: 4px !important;
  border: 1px solid #f0b429 !important;
  background: #2b1d05 !important;
  color: #ffd83d !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* La línea de la página de jugar, con lo que da ese juego ahora. Con los
   colores de la marca: se lee igual en los dos temas. */
.premio-del-juego {
  align-self: flex-start;
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid #f0b429 !important;
  background: #2b1d05 !important;
  color: #ffd83d !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.premio-del-juego[hidden] {
  display: none !important;
}

/* La marca de un juego destacado en su imagen la pone la hoja que crea
   js/premios.js, con su texto y su aspecto. En las miniaturas del buscador
   y de «Para vos», más chica y abajo; sin esa hoja, esto no pinta nada. */
.buscador-item .buscador-item-imagen::before,
.mr-personal-card .mr-personal-card-image::before {
  top: auto;
  right: 1px;
  bottom: 1px;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 9px;
}