/* ---------------------------------------------------------------
   Ajustes encima de bananas.css. Se carga DESPUES, por eso pisa.
   1) los numeros de linea, que se amontonaban abajo
   2) la tabla de pagos
   --------------------------------------------------------------- */

/* ---- 1. rieles de numeros de linea ----
   Se dejan con el tamano original de bananas.css. Antes se amontonaban
   abajo porque el riel dibujaba 10 casillas y este juego solo usa 9
   (lnum=9); esa de mas ahora se esconde en bananas-paytable.js. */

/* ---- 2. tabla de pagos ---- */
#baPaytable{
  width:min(1000px,95vw); max-height:92vh; padding:0;
  background:#07243f; color:#eaf6ff; overflow:hidden;
}
#baPaytable .ba-pay-scroll{
  max-height:92vh; overflow:auto; padding:18px 22px 24px;
  background:linear-gradient(#07243fd9,#041a2fee), var(--ba-pay-fondo) center/cover no-repeat fixed;
}
#baPaytable .ba-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:2px solid #ffd45e; background:#0b3a5e; color:#ffe9a6;
  font:bold 19px/1 Arial; display:grid; place-items:center;
}
#baPaytable .ba-pay-logo{ display:block; margin:2px auto 6px; max-width:min(420px,72%); }
#baPaytable .ba-pay-sub{
  margin:0 0 16px; text-align:center; font-size:13px; color:#bfe2f5;
}
#baPaytable .ba-pay-sub b{ color:#ffe448 }

.ba-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:11px; }
.ba-card{
  display:flex; align-items:center; gap:11px; padding:9px 11px;
  border:2px solid #2f6f9e; border-radius:14px; background:#0a2d4dcc;
}
.ba-card>img{ width:70px; height:70px; object-fit:contain; flex:0 0 70px; }
.ba-card .ba-nom{ display:block; font:bold 13px/1.25 Arial,sans-serif; color:#ffe448; margin-bottom:5px; }
.ba-tabla{ display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; }
.ba-tabla i{
  font-style:normal; font:bold 11px/1 Arial; color:#0a2439; text-align:center;
  background:#8fd0ff; border-radius:4px; padding:3px 5px; min-width:26px;
}
.ba-tabla b{ font:bold 14px/1.2 Arial; color:#fff; font-variant-numeric:tabular-nums; }

/* los dos especiales ocupan toda la fila */
.ba-card.especial{
  grid-column:1/-1; gap:16px; padding:13px 16px;
  border-color:#ffd45e; background:#123f66d9;
  box-shadow:inset 0 0 40px #ffd45e22;
}
.ba-card.especial>img{ width:104px; height:104px; flex:0 0 104px; }
.ba-card.especial .ba-nom{ font-size:15px; }
.ba-card.especial .ba-tabla{ grid-template-columns:repeat(4,auto 1fr); }
.ba-card.especial .ba-tabla b{ font-size:16px; }
.ba-card.especial p{ margin:7px 0 0; font:12px/1.45 Arial; color:#cfe8f8; grid-column:1/-1; }
.ba-card.especial .ba-cuerpo{ flex:1 }

.ba-gratis{
  display:flex; align-items:center; gap:10px; margin-top:9px;
  padding:8px 11px; border-radius:11px; background:#00000045; border:1px solid #ffd45e66;
}
.ba-gratis img{ width:34px; height:34px; object-fit:contain }
.ba-gratis b{ color:#ffe448; font:bold 15px/1 Arial }
.ba-gratis span{ font:12px/1.35 Arial; color:#d8ecfa }

#baPaytable .ba-notas{
  margin:16px 0 0; padding-top:12px; border-top:1px solid #ffffff22;
  font:12px/1.6 Arial; color:#a9cfe4;
}
#baPaytable .ba-notas b{ color:#dff0ff }

@media (max-width:640px){
  .ba-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px }
  .ba-card>img{ width:52px; height:52px; flex-basis:52px }
  .ba-card.especial{ flex-direction:column; text-align:center }
  .ba-card.especial .ba-tabla{ grid-template-columns:auto 1fr }
}