#sidebarMinijuegos {
  position: fixed;
  top: 0; left: 0;
  width: 375px; max-width: 98vw;
  height: 100vh;
  background: rgba(36,34,52,0.98);
  box-shadow: 3px 0 24px #0006;
  z-index: 9999;
  transform: translateX(-105%);
  transition: transform .22s cubic-bezier(.77,.2,.05,1);
  color: #fff;
  border-radius: 0 18px 18px 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Comic Neue', Arial, sans-serif;
}
#sidebarMinijuegos.open { transform: translateX(0); }
.sidebar-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px 10px 24px;
  background: rgba(24,24,36,0.94);
  font-weight: bold; font-size: 1.3rem;
  border-bottom: 1px solid #ffd70022;
  letter-spacing: 0.5px;
}
#closeSidebar {
  font-size: 2.2rem; color: #ffd700;
  background: none; border: none; cursor: pointer;
  line-height: 1; padding: 0 6px;
  margin-left: 10px; border-radius: 50%;
  transition: background .18s;
}
#closeSidebar:active, #closeSidebar:focus { background: #ffd70033; }
#miniList {
  flex: 1; overflow-y: auto; padding: 6px 8px 26px 8px;
}
.mini-item {
  display: flex;
  align-items: center;         /* contenido centrado vertical */
  min-height: 138px;           /* todas las filas igual de altas */
  gap: 15px;
  padding: 14px 8px 14px 6px;
  border-bottom: 1px solid #ffd70011;
  border-radius: 14px;
  margin-bottom: 7px;
  transition: background .17s;
  position: relative;
  background: transparent;
  box-sizing: border-box;
}
.mini-item.active, .mini-item:hover {
  background: linear-gradient(90deg, #ffd70028 0%, #ffd7000b 95%);
}
.mini-logo {
  width: 76px;
  height: 76px;
  min-width: 76px;
  border-radius: 16px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 2px 13px #1113;
  border: 2.5px solid #fff7;
  margin: 0;
  align-self: center;
  transition: filter .15s;
}
.mini-item.active .mini-logo {
  filter: drop-shadow(0 0 8px #ffd700);
}
.mini-info {
  flex: 1 1 0;
  min-width: 0; /* deja que los botones envuelvan en vez de salirse (Ranking cortado) */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mini-title {
  font-size: 1.16rem; font-weight: 700; color: #ffd700;
  margin-bottom: 6px; margin-top: 2px;
  text-shadow: 1px 1px 2px #2229;
  line-height: 1.15;
}
.mini-btns {
  display: flex; gap: 9px; flex-wrap: wrap;
}
.mini-btn {
  font-size: .95rem; padding: 6px 12px;
  border: none; border-radius: 8px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  background: #4fb933; color: #fff;
  box-shadow: 0 2px 7px #2222;
  transition: background .17s, color .15s;
  outline: none;
  display: flex; align-items: center; gap: 6px;
}
/* Mismos colores que los botones de los index: diario=cian, ranking=oro. */
.mini-btn.diario {
  background: #3bc0ea; color: #05243a;
}
.mini-btn.ranking {
  background: #ffc23d; color: #2b1b02; text-decoration: none;
}
.mini-btn:hover, .mini-btn:focus { filter: brightness(0.97) contrast(1.11); }
@media (max-width: 650px) {
  #sidebarMinijuegos { width: 99vw; }
  .mini-logo { width: 62px; min-width: 62px; border-radius: 12px; }
  .mini-title { font-size: 1.03rem; }
}
.btn-sidebar {
  position: fixed; top: 28px; left: 25px; z-index: 10000;
  background: #ffd700; color: #282421; border: none;
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 17px #0002;
  font-size: 2rem; cursor: pointer; transition: background .18s;
}
.btn-sidebar:active, .btn-sidebar:focus { background: #f5c400; }
@media (max-width:700px) {
  .btn-sidebar { width: 44px; height: 44px; font-size: 1.5rem; top: 14px; left: 10px;}
}
.mini-logo-link {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.mini-logo-link:focus .mini-logo,
.mini-logo-link:hover .mini-logo {
  box-shadow: 0 0 0 3px #ffd700cc;
  border-color: #ffd700;
}
.mini-logo-link { text-decoration: none; }
.mini-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;   /* que envuelvan en vez de encoger y cortar el texto (Ranking) */
  margin-top: 7px;
  width: 100%;
}

.mini-btn {
  flex: 1 1 0;             /* se reparten la fila a partes iguales */
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Juegos con 3 botones: Diario grande arriba (fila completa) y, debajo,
   Jugar + Ranking pequeños lado a lado. */
.mini-btn.diario {
  flex: 1 1 100%;
  order: -1;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 1.02rem;
}
.mini-btn i {
  font-size: 1.1em;
}

@media (max-width:500px) {
  .mini-btns { gap: 3px; }
  .mini-btn { font-size: 0.93rem; padding: 6px 0.1em;}
}

/* ===== Locked games (requiere cuenta) ===== */
.mini-item.locked::after{
  content:"🔒";
  position:absolute;
  right:10px; top:10px;
  font-size:.9rem;
  background:rgba(0,0,0,.55);
  padding:4px 8px;
  border-radius:999px;
  color:#ffd700;
  border:1px solid #ffd70033;
  pointer-events:none;
}

.mini-item.locked .mini-logo{
  filter: grayscale(0.15) brightness(0.92);
}

.mini-btn.locked-btn{
  background:#3b4047 !important;
  color:#d0d0d0 !important;
}

/* ===== Modal lock ===== */
.mini-lock-modal.hidden{ display:none; }
.mini-lock-modal{
  position:fixed;
  inset:0;
  z-index: 20000;
}
.mini-lock-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.mini-lock-card{
  position:relative;
  width:min(520px, 92vw);
  margin: 12vh auto 0;
  background: rgba(36,34,52,0.98);
  border:1px solid #ffd70022;
  border-radius: 18px;
  box-shadow: 0 10px 30px #0008;
  padding: 16px 16px 14px;
  color:#fff;
  font-family: 'Comic Neue', Arial, sans-serif;
}
.mini-lock-title{
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
  color:#ffd700;
}
.mini-lock-text{
  font-size: .96rem;
  line-height: 1.35;
  opacity: .95;
}
.mini-lock-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.mini-lock-btn{
  flex:1;
  text-decoration:none;
  text-align:center;
  padding:10px 12px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}
.mini-lock-btn.primary{
  background:#ff7b3a;
  border-color:#c55212;
  color:#fff;
}
.mini-lock-btn.secondary{
  background:#1a2030;
  border-color:#2196F3;
  color:#fff;
}
.mini-lock-x{
  position:absolute;
  right:10px; top:10px;
  border:none;
  background: transparent;
  color:#ffd700;
  font-size: 1.4rem;
  cursor:pointer;
}

.btn-minijuegos{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
}

.btn-minijuegos .btn-text{
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.3px;
}


/* ===== Tooltip onboarding: “Aquí están todos los minijuegos” ===== */
.mini-onboard-tip{
  position: fixed;
  z-index: 25000;
  max-width: 220px;
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .85rem;
  line-height: 1.25;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: tipIn .18s ease-out both;
}
.mini-onboard-tip strong{ color:#ffd700; }

.mini-onboard-tip::after{
  content:"";
  position:absolute;
  width: 10px; height: 10px;
  background: rgba(0,0,0,.82);
  transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

@keyframes tipIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}